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

文章目录

Intro
错误原因 & 解决
正确的前端请求方式 MDN

Intro

前端使用 form 提交文件到后端。
使用 jquery/axios/fetch 或其他HTTP客户端程序发送HTTP请求，但是后端(Spring框架)报错如下：

Request processing failed;
nested exception is org.springframework.web.multipartException: Failed to parse multipart servlet request;
nested exception is java.io.IOException:
org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

错误原因 & 解决

我是因为设置了 "Content-Type": "multipart/form-data" 这样的头，才会失败。
这个请求头的格式样例（见https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type）：

POST /foo HTTP/1.1
Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575
...

其中 multipart/form-data 表示请求内容的数据类型，而后的 boundary和值表示发送数据的边界(用于确定文件何时结束 EOF)。
那我加上 boundary 参数？
可是 boundary 的值是由上传文件的大小影响的，我怎么去确定啊？

答案是不用确定。
(程序员)不要发送 Content-Type 这个请求头。

ref: https://stackoverflow.com/questions/35192841/how-do-i-post-with-multipart-form-data-using-fetch

make sure not to set the Content-Type header. The browser will set it for you, including the boundary parameter.
一定不要在发送请求的时候自己用javascript去设置 Content-Type 头！
浏览器会替你自动设置这个请求头的值(包括 bounday 参数)！

正确的前端请求方式 MDN

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_a_file

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);fetch('https://example.com/profile/avatar', {method: 'PUT',
//   headers: {//     "Content-Type": "multipart/form-data"    // 我们手动加这个header会导致错误，让浏览器自己去设置这个header即可！
//   },body: formData
}).then((response) => response.json()).then((result) => {console.log('Success:', result);}).catch((error) => {console.error('Error:', error);});