记一个 FormData 多文件上传问题

最新推荐文章于 2024-04-02 16:10:15 发布

「已注销」

最新推荐文章于 2024-04-02 16:10:15 发布

阅读量5.7k

点赞数 6

分类专栏：问题记录文章标签： formdata 多文件上传

本文链接：https://blog.csdn.net/sansan_7957/article/details/90209302

版权

20 篇文章 1 订阅

订阅专栏

直接给 FormData append 一个数组的话会变成一个字符串，这样后台拿不到文件信息，如下：

const fd = new FormData();
fd.append('files', this.fileList);
console.log(fd.getAll('files'));

fd.append('files', this.fileList);

const fd = new FormData();
this.fileList.forEach(item => fd.append('files', item));
console.log(fd.getAll('files'));

this.fileList.forEach(item => fd.append('files', item));

FormData 接口的append() 方法会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。

FormData.set 和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。

跟常规表单数据一样，你可以使用同一个名称添加多个值。例如 (为了与PHP命名习惯一致在名称中添加了[])：

formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');
formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');

这项技术使得多文件上传的处理更加简单，因为所得数据结构更有利于循环。

关注