JavaScript Fetch API 中怎么处理请求体为 FormData 的数据-js教程-PHP中文网

使用 fetch 发送 formdata 时不可手动设置 content-type，否则因缺失 boundary 导致服务端解析失败；应让浏览器自动设置 multipart/form-data 及随机 boundary，仅传 body: formdata 即可。

javascript fetch api 中怎么处理请求体为 formdata 的数据

在 JavaScript 中使用 fetch 发送 FormData 类型的请求体时，关键在于**不手动设置 Content-Type 请求头**，让浏览器自动设置为带 boundary 的 multipart/form-data。

为什么不能手动设置 Content-Type？

FormData 提交时，浏览器会自动生成一个随机的 boundary 字符串（如 ----WebKitFormBoundaryabc123），并用它分隔表单字段。如果你手动设置了 Content-Type: multipart/form-data 但没提供正确的 boundary，服务端就无法解析，通常返回 400 或空数据。

✅ 正确做法：完全不传 headers 中的 Content-Type，由 fetch 自动处理。

基本发送方式（推荐）

只需把 FormData 实例直接作为 body 传入，其他交给浏览器：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

创建 FormData 实例，用 .append() 添加字段（支持文件、字符串、Blob）
fetch(url, { method: 'POST', body: formData })
不加 headers 配置，尤其不要写 'Content-Type': 'multipart/form-data'

常见注意事项

文件上传要确保 input 元素已选中文件：获取 input.files[0] 后再 append，否则 FormData 为空。

后端接收逻辑需匹配：例如 Node.js 的 Express 需配合 multer，PHP 直接读 $_FILES 和 $_POST，Python Flask 用 request.files 和 request.form。

如果需要额外 header（如认证 token），可以加，但避开 Content-Type：

fetch('/upload', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer xxx' // ✅ 可以
    // 'Content-Type': '...' ❌ 千万别加
  },
  body: formData
})