formdata自动捕获表单字段需传入元素，否则为空实例；disabled或无name属性的控件被忽略；多选/复选框生成同名多值而非数组；文件上传时第三个参数可覆盖filename；调试应使用entries()或getall()。
FormData 构造函数自动捕获表单字段的条件
只有 <form></form> 元素存在且传入 FormData 构造函数时，浏览器才会自动提取所有成功控件（如 name 属性非空的 <input>、<select></select>、<textarea></textarea>）的值。手动 new FormData() 不会自动收集任何数据。
常见错误是直接写 new FormData() 然后期望它“知道”页面上有表单——它完全不知道。
- ✅ 正确：
const fd = new FormData(document.querySelector('form')) - ❌ 错误：
const fd = new FormData()（空实例，无字段） - ⚠️ 注意：
disabled字段不会被包含，即使有name - ⚠️ 注意：没有
name属性的控件（如<input id="email">）会被跳过
多选 <select multiple></select> 和复选框数组的序列化行为
FormData 不生成数组结构，而是为每个选中项单独添加一条键值对。后端收到的是多个同名字段，不是 JSON 数组。
例如一个 <select name="tag" multiple></select> 选中了 "js" 和 "ts"，fd.getAll('tag') 返回 ['js', 'ts']，但用 fd.append() 或 fetch() 发送时，HTTP body 中是两行：tag=js&tag=ts。
- 后端需用支持重复键的解析方式（如 Node.js 的
querystring.parse()默认保留全部，Express 需配extended: true） - PHP 的
$_POST['tag']自动转为数组，但 Python Flask 的request.form.getlist('tag')才能取全 - 不要试图用
fd.set('tag', ['js','ts'])—— 它会把整个数组转成字符串"js,ts"
文件上传时 append() 的第三个参数影响后端文件名
当用 fd.append('avatar', fileInput.files[0]) 上传文件时，浏览器默认使用 file.name 作为 Content-Disposition 中的 filename。但你可以显式覆盖：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
fd.append('avatar', fileInput.files[0], 'profile.jpg')
这会让后端收到的原始文件名变成 profile.jpg，而不是用户本地的 IMG_1234.png。某些后端框架（如 Django）依赖这个字段做安全校验或存储命名。
- 省略第三个参数 → 使用
file.name - 传空字符串
''→Content-Disposition中不带filename，部分后端可能拒绝处理 - 传非字符串（如
null）→ 浏览器报TypeError: Failed to execute 'append' on 'FormData'
发送前检查键值对是否符合预期的两个可靠方法
别靠猜，用 entries() 或 get()/getAll() 实时看内容。尤其在动态增删字段后，容易漏掉 append 或重复 set。
调试建议：
- 打印所有键值：
for (const [k, v] of fd.entries()) console.log(k, v) - 查某个键的全部值：
fd.getAll('email')（返回数组，即使只一个值） - 注意：
fd.get('email')只返回第一个匹配值，对多选/复选框不安全 - 如果发现字段缺失，优先检查 DOM 是否已渲染、
name是否拼错、控件是否被display: none但未disabled（隐藏控件仍会被收集）
最常被忽略的是表单元素不在当前 <form></form> 内部却以为会被捕获——FormData 只扫描传入的那个 form 节点的直系和后代成功控件，跨父容器无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
