[JavaScript] FormData上传文件,input 选择多个文件但是只上传同一张

一、问题：FormData上传文件 , 后端接口一次只接收一张（死亡微笑），所以前端需要遍历 FileList 中的 File对象装进FormData中， 一张一张上传，这里需要了解 FormData

1.1 如果使用FormData.append的话,后端应该是默认获取第一个file对象，所以需要删除前面循环装进formData中的file对象，假如我选择了2张图片，这时 formData 中 键key为 file 里面会有2个file对象

var formData = new FormData(); 
formData.append("file", newFile);
console.log(formData.getAll('file'))

所以要用formData.delete(‘file’) 删掉前面循环进去的 键key为 file的数据再append新的进去

var formData = new FormData();
formData.delete('file');  
formData.append("file", newFile);
console.log(formData.getAll('file'))

1.2 推荐使用FormData.set()

formData.set('file',newFile)

二、FormData中的方法

2.1 方法详解

FormData.append()
Appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.
将新值附加到FormData对象内的现有键上，或者如果该键不存在，则添加该键。、

FormData.delete()
Deletes a key/value pair from a FormData object.
从FormData对象中删除键/值对。

FormData.entries()
Returns an iterator allowing to go through all key/value pairs contained in this object.
返回一个迭代器，允许遍历此对象中包含的所有键/值对。

FormData.get()
Returns the first value associated with a given key from within a FormData object.
从FormData对象中返回与给定键关联的第一个值。

FormData.getAll()
Returns an array of all the values associated with a given key from within a FormData.
从FormData中返回与给定键关联的所有值的数组。

FormData.has()
Returns a boolean stating whether a FormData object contains a certain key.
返回一个布尔值，说明FormData对象是否包含某个键。

FormData.keys()
Returns an iterator allowing to go through all keys of the key/value pairs contained in this object.
返回一个迭代器，允许遍历此对象中包含的键/值对的所有键。

FormData.set()
Sets a new value for an existing key inside a FormData object, or adds the key/value if it does not already exist.
为FormData对象中的现有键设置新值，或者如果键/值不存在，则添加该键/值。

FormData.values()
Returns an iterator allowing to go through all values  contained in this object.
返回允许遍历此对象中包含的所有值的迭代器。

2.2 FormData 怎么打印？

我们在使用append方法后，在控制台里只能看到FormData原型；
但是对应的键值对已经添加到表单里了，存储的数据并不是以对象属性的方式体现。
所以直接打印是看不到的，因为外界访问不到。

想获取可尝试以下两种方法：

//第一种 
 for (var value of formData.values()) {
    console.log(value);
 }

//第二种 
for (var [a, b] of formData.entries()) {
    console.log(a, b);
 }