js FormData对象及上传文件或图片

虽然开发前端JS多年，但对于一些没有使用到的JS对象还是不大熟悉，WEB开发常用的是上传图片信息，今天把JS中有关于FormData对象做一下整理学习。

FormData对象

FormData对象是用一些键值对来模拟一系列表单控件： 把form中的所有元素的name和value组成一个QueryString，FormDdata中的数据类似Map<String,Object>,操作也类似map。可以达到异步上传文件的作用。

FormData取值

formData.get('name');//获取key为name的第一个值
formData.getAll('name');//返回一个数组,获取key为name的所有值

FormData添加数据

通过append(key,value)来添加数据,如果指定的key不存在则会新增一条数据，如果key存在则添加到数据的末尾

let params = new FormData();
params.append('mcc','hello');
params.append('mnc','world');

FormData删除数据

formData.delete('mcc');

FormData设置修改数据

通过set(key,value)来设置修改数据,如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值

FormData判断是否有改数据

formData.append('k1','v1');
formData.append('k2','v2');
formData.has('k1');//true
formData.has('k2');//true
formData.has('k3');//false

FormData遍历数据

formData.append('k1','v1');
formData.append('k2','v2');
formData.append('k3','v3');
let i = formData.entries();
i.next();//{done: false, value: ['k1','v1']}
i.next();//{done: false, value: ['k2','v2']}
i.next();//{done: false, value: ['k3','v3']}
i.next();//{done: true, value: undefined}

FormData说明

1，每次调用next返回一条数据，数据的顺序由添加的顺序决定

2, 返回的是一个对象, 当done为true时，说明已经遍历完所有的数据，这个也可以作为判断依据

3, 返回的对象的value属性以数组形式存储了一对key/value,数组下标O为key，下标1为value,如果一个key值对应多个value，则返回多对值，也可以通过values只获取value值