formdata是必须的，因为fetch不会自动序列化文件字段，需用它包装文件为浏览器可识别的二进制载荷并自动生成boundary；手动设content-type会覆盖boundary导致上传失败，字段名须与后端约定一致。
fetch 上传文件时为什么 FormData 是必须的
因为 fetch 不像表单提交那样自动序列化文件字段，它需要你手动把文件包装成浏览器能识别的二进制载荷。直接传 File 或 Blob 对象会失败，服务器收不到字段名，Content-Type 也错——唯一可靠方式是用 FormData 实例来组织数据。
常见错误现象：400 Bad Request 或后端解析不到 file 字段；控制台看到请求体是空对象或 [object FormData]（这是正常现象，别慌）。
-
FormData会自动生成 boundary，并设置正确的Content-Type: multipart/form-data; boundary=... - 不用手动设
headers，否则反而会覆盖掉 boundary 导致上传失败 - 字段名必须和后端约定一致，比如后端期待
avatar，就用formData.append('avatar', file)
怎么处理多文件 + 其他表单字段一起上传
一个 FormData 实例可以混装文件和普通字段，比表单 submit 更灵活。关键是顺序不重要，但字段名不能冲突，且每个 File 对象要来自 <input type="file"> 的 files 列表或拖拽事件的 DataTransfer.files。
示例场景：用户选了头像 + 填了昵称 + 勾选了“公开”复选框：
const formData = new FormData();
formData.append('avatar', fileInput.files[0]);
formData.append('nickname', nicknameInput.value);
formData.append('public', publicCheckbox.checked.toString()); // 后端需自行转布尔
fetch('/api/upload', {
method: 'POST',
body: formData // 不要加 headers
});
- 多个文件用循环：
for (const file of fileInput.files) formData.append('files', file)（注意字段名相同，后端才能当数组收） - 如果后端要求字段名带索引（如
files[0]），不要手动拼字符串，改用后端指定的协议，通常直接同名append就行 - 避免重复
append同一文件对象，可能触发奇怪的读取错误
上传进度怎么监听（XMLHttpRequest 还是绕不开？）
fetch 本身不支持上传进度事件，这是硬限制。想显示进度条，目前只有两个务实选择：用 XMLHttpRequest，或者用 ReadableStream + TransformStream 手动分块上传（复杂且兼容性差）。
所以真实项目中，别强求纯 fetch——该切回 XMLHttpRequest 就切。它和 fetch 并不互斥，只是分工不同：
- 只关心成功/失败 → 用
fetch简洁明了 - 需要上传进度、断点续传、大文件分片 → 老老实实用
XMLHttpRequest.upload.onprogress - 别试图用
fetch+Response.body.getReader()监听上传，那是读响应体，不是发请求体
后端接收不到文件？先检查这三处
90% 的问题出在客户端以外的地方，尤其容易忽略中间层干扰。
- Nginx 默认限制上传大小，报
413 Payload Too Large？加client_max_body_size 50M;到配置 - Node.js 的 Express 需要
multer或busboy解析multipart/form-data，原生req.body拿不到文件 - 如果是代理环境（如 Vite dev server、webpack-dev-server），确认代理配置没过滤
multipart请求，某些代理会静默丢弃大请求体
真正卡住的时候，先 curl 测试接口是否通：curl -F "avatar=@./test.jpg" http://localhost:3000/api/upload，排除前端逻辑干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
