JS，如何在FormData中添加数组？

Question

我希望你能够在 JavaScript 的 FormData 中添加数组。

例如：

var fd = new FormData();
fd.append("key", new Array(["a","b","c"]));
console.log(fd.get("key"));

结果是,

a,b,c

结果类型为 'String'...

我想在Java中解析 "aa" 数组（JSONArray）。

请帮助我。

- gdk

---

结果是 a,b,c，这是因为 FormData 仅接受字符串或 Blob 值（请参见 https://developer.mozilla.org/en-US/docs/Web/API/FormData/append#append()_Parameters），因此该数组被转换为字符串。不清楚您实际想要的值是什么。 - Phil

Answer 1

您需要先将数据转换为字符串：

fd.append("key", JSON.stringify(["a","b","c"]));

当您想要检索数据时，将其解析回数组即可。这可以通过手动使用JSON.parse()来完成，或者如果您正在使用express，则可以通过使用JSON/urlencoded body-parser中间件为您完成。

---

解释:

当您使用 .append() 时，作为第二个参数传递的数据将被转换为字符串。对于数组，将调用 .toString() 方法，该方法通过逗号连接数组中的元素。

a,b,c

这样做不好，因为无法轻松地将其解析回数组中，特别是当您有复杂的数组时，例如对象数组或多维数组。

然而，正如@Phil所指出的那样，您可以通过在输入数组上使用JSON.stringify来管理此问题。这样，您提供了一个JSON字符串，可以使用JSON.parse()轻松地将其解析回数据。

"[\"a\",\"b\",\"c\"]" // <-- can be parsed into an array using JSON.parse()

See working example below:

var fd = new FormData();
fd.append("key", JSON.stringify(["a","b","c"]));

var str_arr = fd.get("key");
console.log(str_arr); // string format
console.log(JSON.parse(str_arr)); // array format

- Nick Parsons

---

为什么不在附加值时使用JSON.stringify()，而不是尝试构建自己的JSON格式化程序呢？ - Phil

@Phil 说得好！实际上，我已经更新了我的答案以使用这个。谢谢。 - Nick Parsons

任何新来的人参考，fd.append("key", JSON.stringify(new Array(["a","b","c"]))); 可以简单地改为 fd.append("key", JSON.stringify(["a","b","c"]));。不需要将 new Array 添加到现有项目数组中。 - program_bumble_bee

@bubble-cord 说得好，我可能是从 OP 的问题中保留下来的。我已经更新了它，删除了数组构造函数。 - Nick Parsons

Answer 2

将数组附加到formdata的最简单方法。

示例数组

const array = [ { value: 2, label: 'test' }, { value: 2, label: 'test' }, ]

for (let index = 0; index < array.length; index++) {
  data.append(`array[${index}][value]`, array[index].value);
  data.append(`array[${index}][label]`, array[index].label);
}

- Muhammad Haidar