Formdata 的用法

1 概述：

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。

2 创建空对象实例：

var formData = new FormData();
使用append（）来添加数据
formData.append("file","target”);

3 操作方法：

formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。

image.png
获取值 ：

我们可以通过get(key)/getAll(key)来获取对应的value，

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

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

formData.append("k1", "v2");
formData.append("k1", "v1");

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]

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

formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

判断是否该数据：

我们可以通过has(key)来判断是否对应的key值

formData.append("k2",null);

formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

删除数据：
通过delete(key)，来删除数据

formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");

formData.getAll("k1"); // [ ]

遍历
我们可以通过entries()来获取一个迭代器，然后遍历所有的数据，

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1"); var i = formData.entries();

i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:fase, value:["k1", "v2"]}
i.next(); // {done:fase, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}

前端向后端传formData格式的数据时，一般用post方式，因为post可以传的数据量比较大，速度快。
Request Payload 请求头部的 Content-Type: application/json，请求正文是一个 json 格式的字符串
Form Data 请求头部的 Content-Type: application/x-www-form-urlencoded
因为application/x-www-form-urlencoded传输的数据太小了 不适合传输文件 后来升级为multipart/form-data