当前位置：首页 > article >正文

上传文件报错：the request was rejected because no multipart boundary was found

article 2025/2/8 10:37:09

后端使用的springboot的MultipartFile上传文件，接口使用apifox调试过没有问题，但前端调接口报错。前端使用了fetch发送formData数据。

the request was rejected because no multipart boundary was found

前端使用的请求头是 multipart/form-data 没有问题，

但是经过排查发现发送文件后请求头为：

multipart/form-data; boundary=--------------------------280975778477701894170700

多了boundary=--------------------------280975778477701894170700这一段，

于是查询资料后得到了结果：

当你使用 fetch API 发送 FormData 对象时，通常不需要手动设置 Content-Type 头，因为 fetch 会自动为 FormData 设置正确的 Content-Type 头，包括必要的 boundary 字符串。如果你尝试手动设置 Content-Type 为 multipart/form-data 而不包含正确的 boundary，那么你会遇到错误，因为服务器无法解析请求中的多部分内容。

以下是一些可能导致错误的原因：

缺失或错误的 boundary：multipart/form-data 需要一个 boundary 来分隔不同的部分。如果你手动设置 Content-Type，但未提供正确的 boundary，或者 boundary 与实际请求体中的不匹配，服务器将无法解析请求。
手动设置 Content-Type：如果你手动设置了 Content-Type，那么 fetch 不会为你自动生成 boundary。你需要确保手动设置的 Content-Type 是完全正确的，包括 boundary。

错误示例：

fetch('/upload', {
  method: 'POST',
  body: formData,
  headers: {
    'Content-Type': 'multipart/form-data' // 错误：没有指定 boundary
  }
});

正确示例：

fetch('/upload', {
  method: 'POST',
  body: formData // 正确：浏览器会自动设置 Content-Type 和 boundary
});

如果你确实需要手动设置 Content-Type（通常不建议这样做），你需要确保包括正确的 boundary，如下所示：

const boundary = '--------------------------280975778477701894170700';
const formData = new FormData();

// ... 添加文件和其他表单数据到 formData ...

fetch('/upload', {
  method: 'POST',
  body: formData,
  headers: {
    'Content-Type': `multipart/form-data; boundary=${boundary}`
  }
});

但是，请记住，boundary 应该是唯一的，并且通常是由浏览器生成的。如果你手动指定 boundary，你需要确保它与 FormData 对象内部使用的 boundary 相匹配，这通常是不切实际的。

因此，最佳实践是不要手动设置 Content-Type 头，而是让浏览器处理 FormData 的发送。

查看全文

http://www.kler.cn/a/536324.html