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));    
}

我用你的代码创建了一个简单的错误 fiddle here。您可以在此处查看其提交的 post 数据，您可以在此处看到未上传任何文件。

在页面底部您可以找到

.

我已经用修复程序更正了 fiddle here。您可以从服务器查看它的post数据，其中显示了我上传的两个文件的详细信息。

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
})

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

Does fetch support multiple file upload natively?

javascript

ajax

upload

reactjs

fetch-api

总结

预计

错误

工作

不工作

问题