Angular: 如何post 表单提交到服务器的文件

Question

我有一个表单正在 posted 到我的后端（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]"

这是我的堆栈代码：

查看：

<form ng-submit="insert(config)">
    <input type="text" ng-model="config.name">
    <input type="text" ng-model="config.address">
    <input type="file" ng-model="config.file">
    <button type="submit">Save</button>
</form>

控制器（前端）：

$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)

我需要更改什么才能使 post 正常工作？我想将输入文件 发送到与名称和地址相同的对象 上。

Answer 1

我想你用的是 Jackson 吧？

Kotlin 中的数据字节码类看起来与常规 POJO（具有默认构造函数）之一不同，因此 Jackson 无法初始化这样的 class。尝试向 Jackson Kotlin Module 添加依赖项并确保注册它。

如果您使用 Spring 引导，则将以下代码添加到您的任何 @Configuration 注释 classes:

@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)
}

Angular: 如何post 表单提交到服务器的文件

Angular: how to post a file to the server on form submit

spring

kotlin

angularjs

spring-web