现象
前端用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。