[JavaScript] FormData上传图片的使用

一、问题：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对象内的现有键上，或者如果该键不存在，则添加该键。

FormData.append() 

//从FormData对象中删除键/值对。

FormData.delete()  

//返回一个迭代器，允许遍历此对象中包含的所有键/值对。

FormData.entries() 

//从FormData对象中返回与给定键关联的第一个值。

FormData.get() 

//从FormData中返回与给定键关联的所有值的数组。

FormData.getAll() 

//返回一个布尔值，说明FormData对象是否包含某个键。

FormData.has()  

//返回一个迭代器，允许遍历此对象中包含的键/值对的所有键。

FormData.keys() 

//为FormData对象中的现有键设置新值，或者如果键/值不存在，则添加该键/值。

FormData.set()  

//返回允许遍历此对象中包含的所有值的迭代器。

FormData.values() 

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