formdata传文件失败主因是字段名不匹配、手动设content-type或传入非file对象；必须用input.files[0]而非input.value，fetch时禁设content-type，确保后端字段名一致。
直接用 FormData 传文件，只要三步：拿到 File 对象、append 进去、用 fetch 或 XMLHttpRequest 发出去。但绝大多数上传失败，不是因为不会写，而是卡在字段名不匹配、手动设了 Content-Type、或者传了假的“文件”（比如 input.value 字符串）。
为什么 formData.append('file', file) 没反应？
浏览器不会报错，但后端收不到文件——这是最隐蔽的坑。
- 确认你 append 的第二个参数是
input.files[0]（File实例），不是input.value（只是路径字符串）或input.files[0].name（只是文件名） - 第一个参数（字段名）必须和后端约定一致，比如后端接收
avatar，你就得写formData.append('avatar', file)，写成'file'或'image'就白传 - 如果用了
<input multiple>，别只取files[0]；要循环：for (const f of input.files) formData.append('files', f, f.name) -
File对象必须来自用户真实选择——用 JS 赋值input.value = 'xxx.jpg'不会生成files列表，无效
用 fetch 上传时为什么后端收不到文件？
几乎全是手动设置了 Content-Type 导致的。浏览器需要自己加 boundary，你一插手就破坏了 multipart 结构。
- ❌ 错误写法：
headers: {'Content-Type': 'multipart/form-data'}—— 必须删掉整行 - ✅ 正确写法：只传
body: formData，其他啥都不设，让浏览器自动设置Content-Type: multipart/form-data; boundary=... - 注意：
fetch不会因 HTTP 状态码异常而 reject，记得检查response.ok或response.status - 如果后端用 Express +
multer，确保中间件挂载在路由前，且字段名与append一致（如upload.single('avatar')对应append('avatar', file)）
要不要用 new FormData(formElement) 自动收集？
可以，但要注意它只读取有 name 属性的表单控件，且对 type="file" 的处理和手动 append 完全一致——仍需确保字段名匹配、不手动设头。
- 优势：省去逐个
append文本字段的步骤，适合混合文本+文件的表单 - 风险：如果表单里有多个
type="file"且没设name，它们会被忽略；有name但值为空的字段也会被带上（可能干扰后端解析） - 建议：先用
new FormData(form)，再补 append 额外字段（如 token、时间戳），避免漏掉动态数据 - 调试技巧：用
for (const [k, v] of formData.entries()) console.log(k, v)看实际塞进去的是什么
真正容易被忽略的点是：File 对象一旦被 append 进 FormData，后续修改它（比如改 lastModified）不影响已存入的数据；但如果你在 append 前用 FileReader 读取内容做预览，一定要用同一个 file 实例上传，而不是把 result（Base64 字符串）再 append 一次——那传的就不是文件了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
