FormData上传文件

FormData上传文件

一、创建对象：
创建一个FormData对象实例
1、常用的创建

let formData = new FormData();

2、vue中的创建

let formData = new window.FormData();

3、在表单的基础上创建

<form id="fromCont" action="" method="post">
    <input type="text" name="content">
    <input type="submit" value="提交">
</form>
//根据id获取表单
  var form = $("#fromCont");
//初始化实例
var formData = new FormData(form);
// 获取content内容
var content= formData.get("content"); 
//通过append() 方法向对象中添加content键值对
formData.append("content",content);

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

1、获取值

//通过get(key)/getAll(key)来获取对应的value
formData.get("value");  

2、添加数据

//通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
formData.append("key1", "value1");
formData.append("key2", "value2");
formData.append("key2", "value3");
//获取key1
formData.get("key1");  //返回 "value1"
formData.get("key2");  //返回 "value2"
formData.getAll("key2");  //返回 ['value2','value3']

3、设置、修改数据

//通过set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值。
formData.append("key1", "value1");
formData.set("key1", "value2");
//获取key1
formData.get("key1");  //返回 "value2"

4、删除数据

//通过delete(key)，来删除数据
formData.append("key1", "value1");
formData.delete("k1");
//获取key1
formData.get("key1");  //返回 []

5、判断数据的存在

//通过has(key)来判断是否对应的key值,如果有对应的key值就返回true,如果没有则返回false
formData.append("key1", "value1");
formData.has("key1"); // true
formData.has("key2"); // false