FormData 里 append 文件和字符串，后端收不到文件？
不是 FormData 用错了，是后端没按 multipart/form-data 解析。浏览器发的 FormData 自动设为 Content-Type: multipart/form-data; boundary=...，但如果你用 fetch 或 XMLHttpRequest 提交时手动加了 Content-Type 头，浏览器会把它清掉——可如果后端框架（比如 Express、Spring Boot）依赖这个 header 做解析路由或中间件判断，就可能跳过文件解析逻辑，只当普通表单处理。
常见错误现象：req.files 为空、request.getPart() 报 IllegalStateException、Node.js 的 body-parser 完全不处理 FormData 请求。
- 不要手动设置
Content-Type，让浏览器自动生成；fetch(url, { method: 'POST', body: formData })就够了 - 后端必须启用 multipart 解析：Express 要用
multer或busboy，Spring Boot 要确认spring.servlet.multipart.enabled=true - 字段名大小写敏感，前后端约定一致，比如前端
formData.append('avatar', file)，后端就不能写成request.getFile("Avatar")
多个文件 + 文本字段混传，怎么保证顺序和命名不冲突？
FormData 本身不保证字段顺序，但浏览器按 append() 顺序提交，服务端接收时也基本按此顺序解析。真正影响的是同名字段——比如两次 append('tags', 'a') 和 append('tags', 'b')，某些后端会合并成数组，有些只取最后一个。
使用场景：上传头像 + 填写昵称 + 多张商品图 + 标签数组。
立即学习“前端免费学习笔记（深入）”；
- 文件统一用不同 key：例如
formData.append('avatar', file1)、formData.append('gallery', file2)、formData.append('gallery', file3)—— 后端通过同一 key 接收多值 - 文本字段避免重复 key，除非明确需要数组；如需结构化数据（如 JSON），先
JSON.stringify()再append('metadata', jsonString)，别直接 append 对象 - 注意空文件：如果
file.size === 0，部分后端（如 PHP）会忽略该字段，建议前端校验或补默认值
用 fetch 提交 FormData，为什么响应慢或卡在 pending？
不是网络问题，大概率是后端没正确消费请求体。multipart 请求体较大时，如果后端中间件没及时读取流、或超时设置太短，连接就会挂住，浏览器显示 pending。
性能影响：一个 5MB 的文件 + 3KB 文本字段，整个请求体可能达 5.1MB，但若后端只读了前几 KB 就返回，剩余部分会被丢弃，导致文件截断。
- 检查后端日志是否打印“request stream closed early”或类似提示
- Node.js + multer：确认
limits.fileSize设置足够，且dest目录有写权限 - fetch 不支持上传进度（
onprogress），要用XMLHttpRequest.upload.onprogress；但现代项目建议封装成 Promise 配合AbortController控制中断
FormData 在 Safari / iOS WebView 里上传失败？
iOS 15.4+ 修复了多数 FormData 问题，但老版本（尤其微信内置 WebView）仍存在两个硬伤：一是 File 对象从 input[type=file] 取出后，调 slice() 或构造新 File 会导致类型丢失，被当作文本；二是 append() 传入 Blob 时，若未指定 type，iOS 可能设为 application/octet-stream，后端按扩展名匹配 MIME 类型时失败。
- 上传前检查
file.type，若为空，用file.name后缀推断，例如：new File([file], file.name, { type: fileTypeFromExt(file.name) || 'image/jpeg' }) - 避免对原始
File做无意义包装，直接formData.append('file', input.files[0]) - 兼容性兜底：对 iOS 用户可降级用 base64 编码小文件（
≤1MB），但文本字段仍走FormData，避免整请求体爆炸
最常被忽略的点：后端拿到的文件字段名、前端 append() 的 key、以及你写在接口文档里的字段名，三者必须完全一致——少个下划线、大小写错一位，都可能让文件“消失”。调试时先打 log 看原始请求体字段名，别急着改逻辑。
