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

IT技术 javascript ajax reactjs upload fetch
2021-03-27 21:15:01

概括

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

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

预期的

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

错误

图片

在职的

这个片段工作正常：

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支持本地多文件上传？

2个回答

您的代码的问题在于该行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));    
}

我在这里用你的代码创建了一个简单的错误提示。您可以在此处查看其提交的帖子数据，在那里您可以看到没有文件上传。

在页面底部，您可以找到

在此处输入图片说明.

我已经通过修复更正了这里的小提琴。您可以从服务器查看其发布数据，其中显示了我上传的两个文件的详细信息。

在此处输入图片说明

如果你想要多个文件，你可以使用这个

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
})
完美的！天才！
2021-06-14 21:15:01
其它你可能感兴趣的问题
上一篇Reactjs 组件之间的通信 下一篇如何使用递归 JavaScript 映射方法从父/子关系创建新对象