FormData构造函数能直接读取<form>元素，但需确保表单已渲染到DOM且未被移除；它自动收集带name属性的可提交控件，忽略disabled项和无name字段。
FormData 构造函数能直接读取 <form> 元素吗
能，但必须确保表单已渲染到 DOM 且未被移除。直接传入 <form> 元素引用时，FormData 会自动收集所有带 name 属性的可提交控件（如 <input>、<select>、<textarea>），忽略 disabled 项和无 name 的字段。
常见错误是：在表单尚未挂载（比如 Vue/React 中组件还没 mounted）、或用了 display: none 但没禁用控件时调用，导致部分字段漏掉。注意：visibility: hidden 不影响采集，但 display: none 下的控件仍会被包含——只要它没被 disabled 或缺少 name。
实操建议：
- 用
document.querySelector('form')获取后立即构造，别等异步回调再用 - 避免在 Shadow DOM 内部直接传
form元素（部分浏览器不支持），改用手动append() - 多选
<select multiple>会自动转为多个同名键值对，不用额外处理
如何手动添加文件或 Blob 到 FormData
表单里没 <input type="file">，或者需要动态追加文件（比如截图生成的 Blob），就得用 append() 方法。关键点在于第三个参数：文件名。
立即学习“前端免费学习笔记（深入）”；
如果不传第三个参数，fetch 发送时可能丢失原始文件名，后端解析失败；传了但写错类型（比如传字符串而非 Blob），则报 TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'。
示例：
const fd = new FormData();
const blob = new Blob(['hello'], { type: 'text/plain' });
fd.append('upload', blob, 'hello.txt'); // 第三个参数是文件名，必需
实操建议：
- 从
<input type="file">取文件时，用input.files[0]直接传，不要先读成 base64 - 追加非文件数据（如 JSON 字符串）也用
append()，但别用set()——后者会覆盖同名项，而文件上传常需保留多份同名字段 - 如果后端要求字段顺序，注意
append()是按调用顺序插入的
用 fetch 提交 FormData 时 Content-Type 会被自动设置吗
会。只要 fetch 的 body 是 FormData 实例，浏览器就自动设置 Content-Type 为 multipart/form-data; boundary=...，且**不能手动覆盖**。强行设会触发警告甚至被忽略。
典型错误是写成这样：
fetch('/api', {
method: 'POST',
headers: { 'Content-Type': 'multipart/form-data' }, // ❌ 多余且无效
body: fd
});
结果：请求发出，但后端收不到字段——因为手动设的 Content-Type 没带 boundary，服务端无法解析分隔符。
实操建议：
- 完全删掉
headers里的Content-Type，交给浏览器处理 - 调试时用浏览器 DevTools 的 Network → Payload 查看实际 boundary 和字段结构
- 如果后端非要
application/json，那就别用FormData，改用JSON.stringify()+ 手动设 header
FormData 对象能直接转成普通对象或 URLSearchParams 吗
不能直接转。它内部是键值对列表，支持重复键（比如多个同名 checkbox），而普通对象或 URLSearchParams 都会丢弃重复键或只保留最后一个值。
想转成对象？得自己遍历：
const obj = {};
for (const [key, value] of fd.entries()) {
if (obj[key] === undefined) obj[key] = value;
else if (Array.isArray(obj[key])) obj[key].push(value);
else obj[key] = [obj[key], value];
}
但注意：这仍然无法还原原始类型（比如空字符串、0、false 全变成字符串），也不处理嵌套结构。真正需要序列化为 JSON 的场景，不如一开始就用 JS 对象收集数据。
实操建议：
- 仅当必须兼容老接口或调试打印时才转对象，生产环境优先保持
FormData原始形态 -
fd.getAll('name')比fd.get('name')更安全，尤其对多选控件 - 用
console.log(...fd)看内容很直观，但别依赖它的输出格式做逻辑判断
multipart/form-data 请求设计的载体。拿它去模拟 JSON 提交、或强求转成扁平对象，往往绕远路还埋坑。 
