使用@RequestPart同时上传表单数据和文件(文件与JSON数据同时上传)

前端接口上传文件的时候，通常会将请求header的content-type设置为:multipart/form-data, 或者form表单提交的时候将enctype设置为"multipart/form-data" 。

后端收到请求时由于请求体有@RequestBody 注解标识，通常会用application/json, application/xml处理content-type，此时会报编码格式的问题。

这时候可以使用@RequestPart参数来接收实体对象，@RequestParam来单个接收参数。

@RequestPart这个注解用在multipart/form-data表单提交请求的方法上。

@RequestParam也同样支持multipart/form-data请求。

@RequestParam和@RequestPart的区别是：@RequestParam适用于name-valueString类型的请求域，@RequestPart适用于复杂的请求域（像JSON，XML）

代码实现如下

前端：

var formData = new FormData();
// file 为想要上传的文件
formData.append("file", $("#goods_img_input")[0].files[0]);
//goodInfo 里面即为想要传到后端的json数据
var goodInfo = JSON.stringify({
    "goods_id":parseInt($('#goods_id').text()),
    "name": $('#name').val(),
    "price": $('#price').val(),
    "inventory":$('#inventory').val(),
    "details": $('#details').val()
})
formData.append('goods', new Blob([goodInfo],{type: "application/json"}));

//发送ajax请求
$.ajax({
    url: "/goods/addGoods",
    type: "post",
    //忽略contentType
    contentType: false,
    //取消序列换 formData本来就是序列化好的
    processData: false,
    dataType: "json",
    data: formData,
    success: function (res) {
        if (res>0){
            alert("修改成功！");
            window.location.href = "/goods/findAll/1";
        } else {
            alert("修改失败，请联系系统管理员!");
        }
    }
});

后端：

@PostMapping("/updateGoods")
@ResponseBody
public void updateGoods(
        @RequestPart("goods")  Goods good,
        @RequestPart("file")  MultipartFile file) {
    System.out.println("good"+good);
    System.out.println("file"+file);
}

这样就完成了文件与JSON数据同时上传