为什么 FormData.set 将我的数组变成字符串？

Question

我有一个表单，其中的字段启用了多选。 我能够获取表单数据并查看包含通过文件字段选择的所有文件的数组。

我试图用我修改过的 selected_files 数组替换文件数组，但是当我使用 FormData.set 时，它会将我的数组设置为看起来像的字符串。请看下面的例子。

var form = new FormData(document.getElementById("asset-create-form"));
var files = form.getAll('file')
// file field has multiselect enabled so enduser can select more than one file
console.log(files)
>> [File, File, File, File, File] (5)
console.log(selected_files)
>> [File, File, File, File, File] (5)
form.set('file', selected_files)
new_files = form.getAll('file')
console.log(new_files)
>> ["[object File],[object File],[object File],[object File],[object File]"] (1)

为什么这是一个字符串？如何将我的 selected_files 数组设置为文件字段？

如果set函数只能设置一个变量，那么有没有变通的办法？

Answer 1

如果发送的值不同于String 或Blob，它将自动转换为String。
https://developer.mozilla.org/en-US/docs/Web/API/FormData/set#example

您尝试的array set 既不是String 也不是Blob，所以它被转换了。

换句话说：FormData 可以保存的唯一值是String（任何常规表单字段）和Blob（input type=file），这意味着表单数据不能保存其他数据类型，例如数组、数字、布尔值、null , 对象等。

至于第二个问题，只需循环使用FormData.prototype.append：

var form = new FormData(document.getElementById("asset-create-form"));
form.delete('file'); // delete the files already in the form data
selected_files.forEach(file => form.append('file', file));