fetch本机支持多文件上传吗？

Question

摘要

我正在尝试使用javascript正确设置FormData。

我需要能够上传jpg/png，但我以后可能需要使用fetch上传其他一些文件类型pdf/csv。

预期

我希望它将数据附加到表单

错误

工作

此代码段工作正常：

const formData = new FormData(document.querySelector('form'));
formData.append("extraField", "This is some extra data, testing");

return fetch('http://localhost:8080/api/upload/multi', {
    method: 'POST',
    body: formData,
});

不工作

const formData = new FormData();
const input = document.querySelector('input[type="file"]');
formData.append('files', input.files);

问题

fetch原生支持多文件上传吗？

Answer 1

您的代码存在问题formData.append('files', input.files); 而不是那样，你应该上传每个运行带有唯一键的循环的文件，比如这个

const fileList = document.querySelector('input[type="file"]').files;
    for(var i=0;i<fileList.length;i++) {
    formData.append('file'+i, fileList.item(i));    
}

我已经使用您的代码创建了一个简单的错误小提示here。您可以在此处查看其提交的帖子数据，您可以在其中查看没有上传文件。

在页面底部，您可以找到

我已经修正了小提琴here。您可以从服务器检查其'postt数据，其中显示我上传的两个文件的详细信息。

Answer 2

如果您想要倍数文件，可以使用此

var input = document.querySelector('input[type="file"]')

var data = new FormData()
for (const file of input.files) {
  data.append('files',file,file.name)
}

fetch('http://localhost:8080/api/upload/multi', {
  method: 'POST',
  body: data
})