spring无法接收上传文件

现象

前端用ajax方式提交表单，代码类似于下面的例子。

var formData = new FormData();

// HTML 文件类型input，由用户选择
formData.append("file", fileInputElement.files[0]);

 

$.ajax({
    url: 'url,
    type: 'POST',
    data: formdata,                    // 上传formdata封装的数据
    cache: false,                      // 不缓存
    processData: false,                // jQuery不要去处理发送的数据
    contentType: 'multipart/form-data',   // jQuery不要去设置Content-Type请求头，如果上传文件的话，千万不能加contentType，这里是坑！！！！！！contentType:false,就行了
    success:function (data) {           //成功回调
        console.log(data);
    }
});

后端用spring接收，具体方法见：https://www.cnblogs.com/liuboyuan/p/11607484.html

前端提交请求后，后端spring报错：

FileUploadException: the request was rejected because no multipart boundary was found

 

排坑过程

一、前端提交时尝试各种contentType

后端始终接收不到文件流。

 

二、直接用html中最原始的form提交

<form id="myForm" name="myForm" method="post"  enctype="multipart/form-data" action="url">
    <div>
        <input type="file" id="whiteList" name="whiteList">
    div>
    <input type="submit" value="Submit!">
form>

后端收到了文件，因此定位是前端的问题。

比较ajax提交和原生form提交的请求头后发现：虽然原生form指定了enctype="multipart/form-data"，但发送出去的contentType变成了Content-Type: multipart/form-data; boundary=----WebKitFormBoundary0E8eVHYtBOBtRyIO，浏览器帮我加了个boundary。然后重新去网上看了下multipart/form-data，明白了multipart/form-data要用boundary分割参数，因此boundary必不可少。

 

坑

原生form提交的时候虽然指定enctype，但浏览器会自动加上boundary。ajax请求如果指定了Content-Type，浏览器不会自动加上boundary，还是 multipart/form-data，因此缺少了boundary，导致后端报错。

 

解决

在现象里的代码的注释里已经写出来了，ajax提交文件的时候别指定contentType就行了，浏览器会为contentType自动加上带boundary的 multipart/form-data。