FormDataEvent.formData 是只读属性，无法直接修改；必须调用 event.preventDefault() 后用 new FormData(event.target) 重建并操作，再通过 fetch 提交。
FormDataEvent.formData 是只读的，不能直接赋值修改
浏览器规范明确将 FormDataEvent.formData 设为只读属性（readonly），所以像 event.formData = new FormData() 或 event.formData.append('x', 'y') 这类写法会静默失败或抛出 TypeError: Cannot assign to read only property 'formData'。这不是兼容性问题，而是所有支持 FormDataEvent 的现代浏览器（Chrome 108+、Firefox 117+、Safari 16.4+）的统一行为。
必须用 event.preventDefault() + 手动构造新 FormData 提交
真正可行的拦截修改路径是：阻止原生提交 → 从表单元素或事件中提取原始数据 → 构造新的 FormData 实例 → 调用 fetch 或 XMLHttpRequest 发起请求。关键点：
-
event.preventDefault()必须在事件处理函数开头调用，否则原生提交会立即触发 - 不要依赖
event.formData的内容做修改，它只是“快照”，且不可变；应改用new FormData(event.target)重新采集（event.target是<form>元素） - 如果表单含文件输入，
new FormData(form)仍能正确包含File对象，无需额外处理 - 若需添加/删除字段，对新建的
FormData实例调用.append()、.delete()、.set()即可
form.addEventListener('submit', async (event) => {
event.preventDefault();
const form = event.target;
const fd = new FormData(form);
fd.append('timestamp', Date.now().toString());
fd.delete('internal_token'); // 移除敏感字段
await fetch('/api/submit', {
method: 'POST',
body: fd
});
});
注意 enctype 和空值字段的隐式行为
原生表单提交时，enctype="multipart/form-data" 会自动启用二进制上传；但用 fetch 提交 FormData 时，Content-Type 会被浏览器自动设置为带随机 boundary 的 multipart/form-data，无需手动指定 —— 手动设了反而会破坏文件上传。另外：
- 空字符串值的
<input value="">仍会被new FormData(form)收集；如需过滤空值，得遍历后清理：for (const [key, val] of fd.entries()) { if (val === '') fd.delete(key); } -
<input type="checkbox" checked>未勾选时不会出现在FormData中，这是预期行为；如需强制发送 false，得额外fd.append('agree', form.agree.checked ? 'true' : 'false') - 使用
fd.set()替代append()可避免重复键，尤其当表单含多个同名复选框时
服务端接收逻辑不受影响，但需留意字段顺序和重复键
用 fetch 提交的 FormData 在服务端（如 Node.js 的 busboy、Python 的 request.form）解析方式与原生提交完全一致。唯一差异在于：
立即学习“前端免费学习笔记（深入）”；
- 原生提交中，同名多值字段（如多个
name="tag"）通常以数组形式返回；FormData的.append()多次调用也会生成相同效果 - 但某些旧框架（如 Express 默认的
urlencodedparser）不处理multipart，必须显式配置multer或类似中间件 -
FormData不保留字段插入顺序（规范未保证），若服务端依赖顺序（极少见），需改用URLSearchParams或 JSON
最常被忽略的是：你以为在 FormDataEvent 里能“编辑”数据，其实你只是放弃了一次提交，另起炉灶 —— 所有逻辑迁移、错误处理、加载状态都得自己补全。
