总结
我正在尝试使用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
本身支持多文件上传吗?
3条答案
按热度按时间f1tvaqid1#
如果你想要倍数文件,你可以用这个
j91ykkif2#
代码的问题出在
formData.append('files', input.files);
行中,而不是这样,您应该上载每个运行具有唯一键的循环的文件,如下所示我已经创建了一个简单的错误摆弄here与您的代码。您可以检查它的'提交后的数据在这里,在那里你可以看到,没有文件已经上传。
在页面底部,您可以找到
.
我已经用修复程序更正了小提琴here。你可以从服务器检查它的“post数据”,在那里它显示了我上传的两个文件的细节。
ktca8awb3#
我在similar question上提到过这一点:我也遇到过同样的问题,但使用的是PHP后端。唯一的
formData
键可以工作,但我发现经典的HTML符号工作得很好,只会在服务器上产生一个数组。我更喜欢这样,因为我可以使用与经典的
<input type="file" multiple />
相同的方法来处理这个问题。