FormData是处理表单数据（尤其含文件上传）最直接兼容的方式，自动编码二进制文件、支持混合字段append、可从HTML表单创建、命名约定模拟嵌套结构、fetch自动设Content-Type、需规避手动设头等常见坑。
FormData 是 JavaScript 中处理表单数据（尤其是含文件上传）最直接、兼容性良好的方式。它能自动处理二进制文件的编码，无需手动构造 multipart/form-data 请求体，也不用担心 Blob 或 File 对象的序列化问题。
创建 FormData 并追加混合字段
你可以像操作普通表单一样，把文本字段、数字、日期、文件甚至多个同名文件一起 append 进去。FormData 会按顺序保留字段，并正确处理重复键（如多文件上传）。
- 直接从 HTML 表单创建：
new FormData(formElement)，它会自动收集所有<input type="file">、<textarea>、<select>等控件的值 - 手动添加字段：
formData.append('username', 'alice')，支持字符串、Blob、File、Uint8Array 等类型 - 上传多个同名文件：
input.files是 FileList，遍历后逐个append('files', file)，后端收到的就是数组（如 Express 的req.files.files）
处理文件与非文件字段共存的复杂结构
实际业务中常需提交嵌套结构（如文章 + 封面图 + 多张配图 + 标签数组）。FormData 本身不支持嵌套对象，但可通过命名约定模拟：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 用点号或方括号模拟层级：
formData.append('article.title', 'JS FormData 指南')、formData.append('article.tags[0]', 'javascript') - 文件也遵循同样逻辑：
formData.append('article.cover', coverFile)、formData.append('article.images', image1)、formData.append('article.images', image2) - 后端解析时按前缀提取字段（例如用
multer+ 自定义字段解析器，或在 Node.js 中用busboy手动分组）
配合 fetch 提交并监听进度
使用 fetch 提交 FormData 时，请求头 Content-Type 会被自动设为 multipart/form-data; boundary=...，无需手动设置 —— 手动设反而会导致失败。
立即学习“Java免费学习笔记（深入）”；
- 基础提交：
fetch('/api/upload', { method: 'POST', body: formData }) - 监听上传进度：由于
fetch不原生支持进度事件，可借助XMLHttpRequest或封装流式读取；更推荐用ReadableStream+progress事件（现代浏览器），或使用axios等库的onUploadProgress钩子 - 注意：如果后端返回 JSON，记得调用
response.json()解析；若响应是纯文本或空，需对应处理
常见坑与注意事项
FormData 看似简单，但几个细节容易导致上传失败或字段丢失：
- 不要手动设置 Content-Type：否则浏览器无法注入 boundary，服务器收不到文件
- File 对象必须来自用户触发的 input（如 change 事件），程序生成的 Blob 虽可 append，但部分旧浏览器对 Blob 类型识别不准
-
表单元素 disabled 的字段不会被 new FormData(form) 收集，如需提交，改用
form.elements[i].disabled = false临时启用，或手动 append -
中文文件名在某些后端（如 Java Spring）可能乱码，可在 append 时指定 filename：
formData.append('file', file, encodeURIComponent(file.name))，后端再解码
