javascript 获取是否支持多文件上传?

gijlo24d  于 2022-12-17  发布在  Java
关注(0)|答案(3)|浏览(163)

总结

我正在尝试使用javascript正确设置我的FormData
我需要能够上传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本身支持多文件上传吗?

f1tvaqid

f1tvaqid1#

如果你想要倍数文件,你可以用这个

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

j91ykkif2#

代码的问题出在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。你可以从服务器检查它的“post数据”,在那里它显示了我上传的两个文件的细节。

ktca8awb

ktca8awb3#

我在similar question上提到过这一点:我也遇到过同样的问题,但使用的是PHP后端。唯一的formData键可以工作,但我发现经典的HTML符号工作得很好,只会在服务器上产生一个数组。

formData.append('file[]', data[i]);

我更喜欢这样,因为我可以使用与经典的<input type="file" multiple />相同的方法来处理这个问题。

相关问题