Angular：如何在表单提交中发布文件到服务器

我有一个表单被张贴到我的后端（Kotlin，Spring Web）。 这个表格有一些文字输入，而且这个post完美无瑕。 但是当我添加一个文件输入时，该post停止工作，返回以下错误：

{status: 400, error: "Bad Request",…} error: "Bad Request" exception: "org.springframework.http.converter.HttpMessageNotReadableException" message: "Could not read document: No suitable constructor found for type [simple type, class com.test.InsertConfigCommand]: can not instantiate from JSON object (missing default constructor or creator, or perhaps need to add/enable type information?)↵ at [Source: java.io.PushbackInputStream@2cb43211; line: 1, column: 2]; nested exception is com.fasterxml.jackson.databind.JsonMappingException: No suitable constructor found for type [simple type, class com.test.InsertConfigCommand]: can not instantiate from JSON object (missing default constructor or creator, or perhaps need to add/enable type information?)↵ at [Source: java.io.PushbackInputStream@2cb43211; line: 1, column: 2]" 

这里是我的堆栈的代码：

视图：

 
    Save  

控制器（前端）：

 $scope.insert = function (config) { $http.post('/config', config) .then(function (response) { $.snackbar({content: "Success!"}); }, $scope.showErrorMessage); }; 

控制器（后端）：

 @RequestMapping(method = arrayOf(RequestMethod.POST)) fun insert(@RequestBody config: InsertConfigCommand) = service.save(config) 

InsertConfigCommand

 data class InsertConfigCommand ( val name : String = "", val address : String = "", val file : MultipartFile ) 

我试图按照以下的方式来完成这个post，它可以工作，但只发送文件：

控制器（前端）：

 $scope.insert = function (file) { var fd = new FormData(); fd.append('file', file); return $http.post('/config', fd, { transformRequest: angular.identity, headers: { 'Content-Type': undefined } }); }; 

控制器（后端）：

 @RequestMapping(method = arrayOf(RequestMethod.POST)) fun insert(@RequestParam(value = "file", required = true) file: MultipartFile) = service.save(file) 

我需要改变这个职位的工作？ 我想要将输入文件发送到名称和地址相同的对象上。

Answer 1

我想你正在使用jackson，对吧？

Kotlin中的数据类的字节码看起来不同于常规的POJO（具有默认构造函数），所以Jackson无法初始化这样的类。 尝试添加一个依赖到jacksonKotlin模块 ，并确保注册它。

如果您使用Spring Boot，则将以下代码添加到您的任何@Configuration批注类中：

 @Bean open fun kotlinModule(): KotlinModule { return KotlinModule() } 

看看是否有帮助

Answer 2

我已经使用这个教程封装了FormData对象中的文件，并发布该对象https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

 $scope.insert = function (config) { var fd = new FormData(); fd.append('name', config.name); fd.append('address', config.address); fd.append('file', $scope.file); $http.post('/config', fd, { transformRequest: angular.identity, headers: {'Content-Type': undefined} }) .then(function (response) { $.snackbar({content: "Success!"}); }, $scope.showErrorMessage); }; 

在我的Kotlin控制器上，我收到每个属性作为一个单独的参数：

 @RequestMapping(method = arrayOf(RequestMethod.POST)) fun insert(@RequestParam(value = "name", required = true) name: String, @RequestParam(value = "address", required = true) address: String, @RequestParam(value = "file", required = false) file: MultipartFile): InsertConfigCommand? { val command = InsertConfigCommand( name = name, address = address, file = file) return service.save(command) }