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

Posted 2023-02-26

【中文标题】在 Spring Boot App 中使用 Jquery 和 FormData 提交表单字段并上传 File 到 Spring MVC Controller

【英文标题】：Use Jquery and FormData to submit form fields and uploaded File to Spring MVC Controller in Spring Boot App

【发布时间】：2016-02-25 15:26:19

【问题描述】：

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

我一直在控制器端收到此异常“当前请求不是多部分请求”。

我的设置。

我有一个常规的 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 实例时）

在服务器端，我的控制器如下所示：

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

【问题讨论】：

** 请注意，WebResponse 是我的自定义响应类

您收到一个错误，提示您的请求不是多部分请求...您认为这是什么意思？您可能需要更改您的内容类型标头吗？

我尝试使用 headers: 'Content-Type': 'multipart/form-data' 和 contentType: 'multipart/form-data' 现在我得到:( FileUploadException: 请求被拒绝，因为未找到多部分边界我的请求有效负载如下所示： ------WebKitFormBoundaryPG92Ng6h630YkJKN Content-Disposition: form-data; name="form_data" "id":"","name":"s","code ":"s" // ... 更多 json ------WebKitFormBoundaryPG92Ng6h630YkJKN Content-Disposition: form-data; name="image"; filename="ThumbsUp.jpg" Content-Type: image/jpeg -- ----WebKitFormBoundaryPG92Ng6h630YkJKN--

【参考方案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
    
);

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

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

所以我要求杰克逊忽略那些未映射的属性

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

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

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

【讨论】：

我在上面的实现中遇到了这个错误：由于被认为是客户端错误（例如，格式错误的请求语法、无效的请求消息帧、或欺骗性请求路由）。