使用 fetch 发送 FormData 时不可手动设置 Content-Type，否则因缺失 boundary 导致服务端解析失败；应让浏览器自动设置 multipart/form-data 及随机 boundary，仅传 body: 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免费学习笔记（深入）”；
- 创建
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
})
调试小技巧
在浏览器开发者工具的 Network 面板中查看该请求：
- Headers 标签页下，
Content-Type应显示为multipart/form-data; boundary=----XXX - Payload 标签页能看到原始分段结构（含 boundary、字段名、文件名、内容类型等）
- 若看到
Content-Type: text/plain或缺失 boundary，说明你误设了 header
