FormData.append() 怎么加非文件字段
直接用 append() 就行，和加文件没区别，但很多人误以为要“拼接字符串”或手动构造 boundary —— 完全没必要。
浏览器原生 FormData 会自动处理 multipart/form-data 编码，包括字段名、值、类型、分隔符。你只管塞进去，它负责组装。
-
formData.append('user_id', '123')：传字符串，自动当text/plain -
formData.append('profile', fileInput.files[0])：传File对象，自动带 filename 和 content-type -
formData.append('metadata', JSON.stringify({role: 'admin'}))：传 JSON 字符串也 OK，后端按普通字段收
后端收不到额外字段？检查 Content-Type 是否被手动覆盖
常见错误：用 fetch 或 XMLHttpRequest 发送时，手贱写了 headers: {'Content-Type': 'multipart/form-data'} —— 这会导致失败。
原因：multipart/form-data 请求必须带 boundary，而浏览器自动生成的 Content-Type 是类似 multipart/form-data; boundary=----WebKitFormBoundaryxxx 的格式。你硬设一个没 boundary 的 header，服务端就解析不了。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确做法：不设
Content-Type，让浏览器自己填 - ❌ 错误写法：
headers: {'Content-Type': 'multipart/form-data'} - 如果用了
axios，别配headers里的Content-Type，更别设transformRequest干预 FormData
上传大文件时附带参数，会不会影响进度监听
不影响。所有字段（包括字符串、Blob、File）都会统一走二进制流传输，XMLHttpRequest.upload.onprogress 或 fetch + ReadableStream（需额外封装）监听的是整个请求体的发送进度，不是“只监文件”。
但注意：如果你在 append() 里塞了超大字符串（比如几 MB 的 base64 图片），它也会被当成二进制块发出去，占用带宽、拖慢整体上传节奏，还可能触发内存警告。
- 避免把图片转 base64 再塞进
FormData；直接塞Blob或File - 字符串字段控制在几 KB 内，比如 token、id、简单 JSON
- Node.js 后端用
busboy或multer接收时，字段和文件是分开触发事件的，顺序不一定，别假设“字段一定先到”
兼容性与边界情况：IE11 和 Safari 旧版的坑
FormData 本身 IE10+、Safari 5.1+ 都支持，但部分行为不一致：
- IE11 不支持直接
append()二进制Blob（如new Blob(['abc'])），但支持File对象 —— 所以动态生成的非文件内容，最好转成new File([str], 'field.txt')再塞 - Safari ≤ 11.1 在
fetch中传FormData时，偶尔漏掉最后一个字段（尤其多字段+文件混传），加个空字段兜底：formData.append('dummy', '') - 所有浏览器都不支持
FormData.get()读取已 append 的字段值（只读 API），调试时用console.log([...formData.entries()])
复杂点在于：字段名重复、嵌套对象、数组值这些，FormData 一律扁平处理，后端得按约定解析，浏览器不管语义。
