vue文件上传通过路由报错the request was rejected because no multipart boundary was found

这个错误通常是因为在上传文件时没有正确设置请求头部的 Content-Type，导致服务器无法识别上传的数据类型。在使用路由上传文件时，可以在请求头部设置 Content-Type 为 multipart/form-data，并设置 boundary 参数，boundary 参数可以随意设置，但需要保证在请求体中没有出现过。

示例代码：

let formData = new FormData();
formData.append('file', file);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data; boundary=' + new Date().getTime()
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});

在以上代码中，我们使用了 axios 库来发送 POST 请求，请求体中使用 FormData 对象来封装要上传的文件。在请求头部设置了 Content-Type 为 multipart/form-data，并设置了 boundary 参数，boundary 参数通过获取当前时间戳来保证唯一性。

相关问题

使用el-upload报request was rejected because no multipart boundary was found

当使用el-upload组件时，出现"request was rejected because no multipart boundary was found"错误是因为请求中没有找到多部分边界。这个错误通常发生在没有正确设置请求的Content-Type头部时。

为了解决这个问题，你需要进行以下设置：
- 在`httpRequest()`方法中，设置`contentType`为`false`，这样可以避免Spring Boot报错。服务器会找不到分割表单内容的参数。
- 同样，在`httpRequest()`方法中，将`processData`设置为`false`，避免jQuery将数据转换为字符串。
- 另外，你可以尝试加上`cache: false`，这个应该不重要，因为POST请求不会走缓存。
- 最后，你可以将`async`设置为`false`或`true`，这个应该不重要，因为同步和异步都能工作。

通过以上设置，你应该能够解决"request was rejected because no multipart boundary was found"错误。如果服务器返回200状态码，你将会看到成功的消息，否则会显示错误消息。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue+elementui+axios+servlet文件上传问题](https://blog.csdn.net/qq_43761240/article/details/124463136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [Spring Boot+Element 文件随表单上传文件 同步上传](https://blog.csdn.net/qq_37975021/article/details/106867838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

no multipart boundary was found

回答: 当出现"no multipart boundary was found"错误时，这通常是由于缺少multipart请求的边界导致的。在使用axios上传文件到服务器时，需要设置headers为"multipart/form-data"并指定边界。可以使用FormData对象来组织上传的参数，并在headers中设置正确的Content-Type。例如，在Vue项目中使用axios上传文件到服务器，可以按照以下方式解决该问题：

let params = new FormData();
params.append('recordnumber', recordnumber);
params.append('clid', itemList.id);
params.append('file', item.file);

this.$axios({
  method: 'post',
  url: '/gtkjgh/archive/save/one',
  data: params,
  headers: {
    'Content-Type': 'multipart/form-data; boundary=' + new Date().getTime()
  }
}).then(function (response) {
  resolve();
}).catch(function (error) {
  console.log(error);
});

通过设置正确的Content-Type和边界，可以解决"no multipart boundary was found"错误。\[2\]请注意，有些人可能会建议去掉Content-Type设置，但这可能会导致另一个错误"Current request is not a multipart request"。因此，确保设置正确的Content-Type和边界是解决该问题的正确方法。\[3\]
#### 引用[.reference_title]
- *1* [no multipart boundary was found](https://blog.csdn.net/qq_30033537/article/details/105604665)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue - axios上传文件到服务器，设置headers，解决no multipart boundary was found](https://blog.csdn.net/idomyway/article/details/110456502)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [postman 请求文件上传遇到的问题](https://blog.csdn.net/qq_30711653/article/details/88717471)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]