使用 Jquery 和 FormData 将表单字段和上传的文件提交到 Spring Boot App 中的 Spring MVC 控制器

Question

我无法使用 Jquery 和 FormData 提交表单字段并将文件上传到 Spring Boot App 中的 MVC 控制器。

我一直在控制器端收到此异常 "The current request is not a multipart request"。

我的设置。

我有一个常规的 Spring Boot Webapp

这是我的 spring 引导版本：

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.2.7.RELEASE</version>
</parent>

我的 Ajax 表单提交如下所示：

var entityJson = form2js("my-form-id",null,false); // js library to get json from form
var entityJsonStr = JSON.stringify(entityJson);

var formData = new FormData();
formData.append("data", entityJsonStr); // the entered data as JSON


// append files, if there are any
$.each($("#my-form-id").find("input[type='file']"), function(i, tag) {
    $.each($(tag)[0].files, function(i, file) {
       formData.append(tag.name, file);
    });
});

$.ajax({
    url:     theUrl,
    type:    'POST',
    headers: {'Content-Type': undefined},
    cache: false,
    processData: false,
    data:    formData,
    error: function(xhr,status,err){
        // failure handling
    },
    success: function(response){
        // success handling
    }
});

只有 json 提交绝对没问题，（当我只提交 entityJsonStr 而不是 FormData 实例时）

在服务器端，我的控制器看起来像这样：

@RequestMapping(value="/save", method= RequestMethod.POST, produces=APPLICATION_JSON_UTF_8)
public @ResponseBody WebResponse<MyEntity> save(
        @Valid @RequestPart(value="data") MyEntity myEntity
        ,@RequestPart(value = "image", required = false) MultipartFile image
) throws Exception {
    try {

        validateImage(image);
        saveImage(myEntity.getName() + ".jpg", image);

        shoppingCenterService.save(myEntity);
        MyEntity shoppingCenterWithOnlyId = getEmptyShoppingCenterWithId(myEntity.getId());

        return new WebResponse(true, SHOPPINGCENTER_SAVE_SUCCESS);
    } catch (DuplicacyException de) {
        return getDuplicacyResponse(de, myEntity);
    } catch(Exception e) {
        LOGGER.error("MyEntity Controller[save]", e);
        return new WebResponse(false, MYENTITY_SAVE_FAILED); // custom response
    }
}

当我不使用@RequestPart而只是使用@Valid @RequestBody MyEntity myEntity并且不在javascript中使用FormData对象时，我得到了正确的json 转换为 MyEntity 的对象 ...

我一直收到这个异常：

org.springframework.web.multipart.MultipartException: The current request is not a multipart request

我已经尝试了以下所有组合，均无效

// dataType: 'json',
// contentType: 'application/json',

headers: {'Content-Type': undefined},
cache: false,
//  contentType: null,
//  processData: false,
// enctype: 'multipart/form-data',
processData: false,
//contentType: false,
//cache: false,

// async:   true,
// cache:   false,
// global:  false,

但没有正确提交表单数据和文件。

几天来我一直在努力让它工作......我不明白我做错了什么。

如果有人成功解决了这个问题，请分享解决方案。

更新：

在 Jny 的 回复后，我尝试

headers: {'Content-Type': 'multipart/form-data'}

和

contentType:  'multipart/form-data'

现在我得到了:(

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

我的请求负载如下所示：

------WebKitFormBoundaryPG92Ng6h630YkJKN
Content-Disposition: form-data; name="form_data"

{"id":"","name":"s","code":"s" 
  // ... more json
}
------WebKitFormBoundaryPG92Ng6h630YkJKN
Content-Disposition: form-data; name="image"; filename="ThumbsUp.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryPG92Ng6h630YkJKN--

Answer 1

找到解决方案！！现在可以用了 Yippee :)

我们需要做的是当我们在 FormData 中设置 Json-string 时，我们需要指定这部分的内容类型是 json ....所以解决方案现在看起来像这样：

var entityJson = form2js("my-form-id",null,false); // js library to get json from form
var entityJsonStr = JSON.stringify(entityJson);

var formData = new FormData();
formData.append("data", new Blob([entityJsonStr], {
                type : "application/json"  // ** specify that this is JSON**
            })); 


// append files, if there are any
$.each($("#my-form-id").find("input[type='file']"), function(i, tag) {
    $.each($(tag)[0].files, function(i, file) {
       formData.append(tag.name, file);
    });
});

$.ajax({
    url:     theUrl,
    type:    'POST',
    processData: false,
    contentType: false,
    cache: false,
    data:    formData,
    error: function(xhr,status,err){
        // failure handling
    },
    success: function(response){
        // success handling
    }
});

然后控制器看起来和之前一样。

还有一个变化，我最终为我的实体做了。因为我现在有这个新的表单字段 "image" 这并不意味着直接在我的实体中成为属性。

所以我让 Jackson 忽略那些未映射的属性

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

@JsonIgnoreProperties(ignoreUnknown = true)
// MyEntity class goes here {}

现在可以使用了，我可以 ajax 提交带有表单数据和文件的表单。

使用 Jquery 和 FormData 将表单字段和上传的文件提交到 Spring Boot App 中的 Spring MVC 控制器

Use Jquery and FormData to submit form fields and uploaded File to Spring MVC Controller in Spring Boot App

ajax

jquery

spring-mvc

form-data

spring-boot