FormData 读取重复字段并保留提交顺序的方法

如果一个表单里有多个相同 name 的复选框、标签或文件字段，FormData 不会自动把它们合并成一个值。正确的做法是：只关心某个字段时用 getAll()，需要保留全部字段的原始先后关系时用 entries() 或直接 for...of。不要用 get() 或 Object.fromEntries() 代替这两种读取方式，它们会丢掉重复项。

官方资料：https://developer.mozilla.org/en-US/docs/Web/API/FormData

FormData 保存的是有顺序的键值条目。getAll("tag") 适合得到某个字段的全部值；entries() 适合把不同字段之间的交错顺序也完整保留下来。

先判断：你要的是同名数组，还是完整条目序列

重复字段通常来自连续的 append()，也可能来自表单中多个使用同一 name 的控件。下面这个例子故意让 tag 出现两次，并在中间插入 priority，这样能看出两种读取目标的区别。

// append 会新增条目；同名字段不会自动覆盖前一个值
const formData = new FormData();
formData.append("tag", "go");
formData.append("priority", "high");
formData.append("tag", "web");

// 只观察 tag：得到同名值，但看不到 priority 位于两个 tag 之间
const tags = formData.getAll("tag");
console.log(tags); // ["go", "web"]

这里的 tags 能保留 tag 自身的顺序，但它不再携带 priority 的位置。如果业务只需要提交标签数组，这就足够；如果要重放、审计或调试完整提交，就应继续遍历原始条目。

只读取重复字段：用 getAll 保留同名值顺序

getAll(name) 返回指定键对应的全部值；没有匹配项时返回空数组。它比手动调用多次 get() 更明确，也不会因为字段缺失抛出异常。字符串和文件都可能成为数组成员，所以展示时不要假定每个成员都是字符串。

// getAll 适合复选框、标签列表等“同一个字段的多个值”
const selected = formData.getAll("tag");
const readable = selected.map((value) => {
  // 文件值读取 name，普通字段保留字符串内容
  return typeof value === "string" ? value : value.name;
});

console.log(readable); // ["go", "web"]

// 缺少该 name 时得到 []，可以直接作为空列表处理
const missing = formData.getAll("unknown");
console.log(missing.length); // 0

如果服务端只接受一个值，先明确选择策略：取第一项、拒绝多项，还是把数组序列化后提交。不要悄悄使用 get()，因为它只返回第一个匹配值，后续重复项会被忽略。

保留完整提交顺序：遍历 entries 或 FormData 本身

当字段顺序本身有意义，例如需要按用户选择顺序生成操作记录，应该遍历整个 entry list。entries() 返回键值对迭代器，for...of formData 是它的简写形式。两者都能看到 tag → priority → tag 的完整排列。

// 遍历完整条目，保留不同字段之间的交错位置
const orderedEntries = [];
for (const [name, value] of formData.entries()) {
  // File/Blob 不直接拼接二进制内容，只记录可读的文件名
  const displayValue = typeof value === "string" ? value : `[文件] ${value.name}`;
  orderedEntries.push({ name, value: displayValue });
}

console.log(orderedEntries);
// [
//   { name: "tag", value: "go" },
//   { name: "priority", value: "high" },
//   { name: "tag", value: "web" }
// ]

如果只需要显示或记录，可以把条目转换成数组；如果还要发送请求，继续把原始 formData 作为 fetch() 的 body，不要把这个展示数组误当成上传体。

回退与复查：避免重复值被无意覆盖

最常见的丢值来自三个地方：把 append() 写成 set()，用 get() 读取多选字段，或用 Object.fromEntries(formData) 直接转对象。第三种写法会把同名键压成一个属性，通常只留下最后一次出现的值，因此不能作为保留重复字段的通用方案。

// set 会替换同名条目；需要追加重复值时不要使用它
const single = new FormData();
single.append("tag", "go");
single.set("tag", "web");
console.log(single.getAll("tag")); // ["web"]

// 需要单值对象时才使用 fromEntries，并先确认重复值可以被丢弃
const lastValueByName = Object.fromEntries(single.entries());
console.log(lastValueByName.tag); // "web"

// 复查清单：多值字段用 getAll，顺序敏感场景用 entries
const tagsAgain = formData.getAll("tag");
const orderedAgain = [...formData];
console.log(tagsAgain.length, orderedAgain.length);

若改动后发现数组长度变成 1，先检查写入端是否误用了 set()，再检查读取端是否退回了 get()。若只是需要向服务器发送表单，直接把 FormData 交给 fetch()，不要手工设置 multipart/form-data 的 Content-Type，边界参数应由浏览器生成。

常见追问

getAll() 能保留字段在整个表单中的位置吗？不能。它只返回一个 name 的值数组；要保留不同 name 交错出现的位置，请遍历 entries()。

for...of formData 和 entries() 有区别吗？在遍历键值对这一点上没有实际区别，前者是后者的便捷写法；需要把迭代器传给其他函数时可以显式调用 entries()。

文件字段也能用 getAll() 吗？可以，返回值可能是 File 或字符串。读取文件信息时使用其 name、size 等属性，不要把二进制内容直接拼进日志。