jquery - 在Spring Boot App中使用Jquery和FormData提交表单字段并上传文件到Spring MVC Controller

Question

我无法使用 Jquery 和 FormData 提交表单字段并将文件上传到 Spring Boot 应用程序中的 Spring MVC Controller 。

我在 Controller 端不断收到此异常“当前请求不是多部分请求”。

我的设置。

我有一个常规的 Spring Boot Web 应用程序

这是我的 Spring Boot 版本:

<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 实例时)

在服务器端，我的 Controller 如下所示:

@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 的 content-type ....所以解决方案现在看起来像这样:

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

然后 Controller 看起来和之前一样。

我最终为我的实体做了一项更改。因为我现在有这个新的表单字段作为“图像”，它并不意味着直接成为我的实体中的属性。

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

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

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

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