new FormData() 创建空实例最可控，适合动态拼接字段；从 form 元素创建需确保其已挂载 DOM；提交时勿手动设置 Content-Type；调试需用 entries() 或 get() 方法。

FormData 构造函数直接创建空实例再 append

直接用 new FormData() 创建空对象，是手动构建表单数据最可控的方式。适合不依赖真实 <form></form> 元素、或需动态拼接字段（比如混合文件与字符串、追加计算值）的场景。

常见错误：用 new FormData(formElement) 却传入 null 或未挂载 DOM 的节点，导致报错 TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'。

• append 字段名重复时，后添加的值不会覆盖前值，而是形成多值（类似 <input name="tag" multiple>），服务端收到的是数组
• 传文件需用 Blob 或 File 实例，不能传路径字符串（如 "./avatar.jpg"）
• 若后续要调用 set() 替换某字段全部值，注意它会清除同名所有项，而 append() 只追加

const fd = new FormData();
fd.append('username', 'alice');
fd.append('avatar', fileInput.files[0], 'avatar.png'); // 第三参数为文件名（可选）
fd.append('tags', 'frontend');
fd.append('tags', 'js');

从已有

元素自动采集数据

只要页面上存在已渲染的 <form></form>，且其 name 或 id 属性有效，就能一键采集所有可提交字段——包括 <input>、<select></select>、<textarea></textarea>，且自动忽略 disabled 项和无 name 的控件。

容易踩的坑：type="checkbox" 或 type="radio" 若未被勾选，对应字段根本不会出现在 FormData 中（不是传空字符串，是完全缺失），后端需做存在性判断而非空值校验。

立即学习“前端免费学习笔记（深入）”；

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 表单内 <input type="file"> 多选时，files 是 FileList，new FormData(form) 会自动展开为多个同名项
• 如果 form 用了 method="get" 或 action，不影响 FormData 构建，只影响后续 submit() 行为
• 动态插入的表单控件，必须在插入 DOM 后再构造 FormData，否则采集不到

const form = document.querySelector('#user-form');
const fd = new FormData(form); // 自动读取所有有效字段

fetch 提交 FormData 时不要设 Content-Type

这是最常被误操作的一点：手动给 fetch 请求头设置 Content-Type: multipart/form-data，结果后端收不到任何字段。浏览器在发现 body 是 FormData 实例时，会自动生成带随机 boundary 的 header，你显式设置会覆盖它，导致服务端无法解析。

典型错误现象：Node.js 的 express + multer 收不到 req.file 或 req.body，Nginx 日志显示 400；Python Flask 的 request.form 为空。

• 只需传 body: fd，其他 header 让浏览器自己处理
• 若需额外 header（如认证 token），可用 headers: { 'Authorization': 'Bearer xxx' }，但别碰 Content-Type
• 用 XMLHttpRequest 也一样：设 xhr.setRequestHeader 会破坏 boundary，应完全不设

fetch('/api/upload', {
  method: 'POST',
  body: fd // ✅ 不要加 headers: { 'Content-Type': ... }
});

调试 FormData 内容：不要 console.log(fd)

直接 console.log(fd) 在大多数浏览器里只显示空对象或 FormData {}，看不出实际内容。必须用 entries()、get() 或 getAll() 显式提取。

另一个盲区：FormData 是异步读取文件流的封装，append() 后立即调用 get() 能拿到值，但文件内容本身还没被序列化，这不影响提交，只是调试时别误以为“没塞进去”。

• for (const [key, value] of fd.entries()) { ... } 是最直观的遍历方式
• fd.get('username') 返回第一个匹配值，fd.getAll('tags') 返回所有同名值数组
• Chrome DevTools 的 Network 面板中，点击请求 → Payload → View source，能看到原始 multipart 数据（含 boundary 和字段分隔）

for (const [k, v] of fd.entries()) {
  console.log(k, v instanceof File ? `(File: ${v.name})` : v);
}

FormData 的边界行为很实在：字段名大小写敏感、空字符串字段会被保留、文件名默认取 File.name 但可覆盖——这些细节不报错，却直接影响后端接收逻辑。