浅析FormData.append()的使用、FormData对象常用方法、如何使用FormData传文件流传json对象传list数组、如何使用FormData传多个文件、如何打印FormData对象的内容

　　很早之前写过一篇 FormData 对象方法的介绍，可以看这篇：HTML5 FormData 方法介绍以及实现文件上传：上传文件实例、FormData 对象方法介绍

一、FormData.append()

　　FormData 接口的 append() 方法会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。

　　FormData.set 和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。

1、语法：这个方法有两个版本：一个有两个参数的版本和一个有三个参数的版本。

formData.append(name, value);
formData.append(name, value, filename);

2、参数：

（1）name：字段名称，也就是 key。value中包含的数据对应的表单名称。

（2）value：表单的值。可以是USVString 或 Blob (包括子类型，如 File)。

（3）filename： 可选。传给服务器的文件名称 (一个 USVString)，当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 "blob"。 File 对象的默认文件名是该文件的名称。（注意：如果你指定一个 Blob 作为数据添加到 FormData 对象中，文件名会被放在 "Content-Disposition" 头部（常常会根据浏览器变化而变化）传给服务器。）

　　第三个参数 filename 之前确实没用过，得注意一下，今天也是看到这个第 3 个参数，所以决定研究一下。

二、FormData 常用方法

1、创建 FormData 对象

// 1、创建一个空对象
var formData = new FormData(); 

// 2、使用已有表单来初始化对象
//表单示例
<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>

//方法示例
// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上，添加其他数据
formData.append("token","kshdfiwi3rh");

2、操作方法

// 1、获取值：通过get(key)/getAll(key)来获取对应的value
formData.get("name"); // 获取key为name的第一个值
formData.getAll("name"); // 返回一个数组，获取key为name的所有值

// 2、添加数据：通过append(key, value)来添加数据
// 如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
formData.append("k1", "v1");
formData.append("k1", "v2");

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

// 3、设置修改数据：set(key, value)来设置修改数据
// 如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值
formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

// 4、判断是否存在对应数据：has(key)来判断是否对应的key值
formData.has("k1"); // true

// 5、删除数据
formData.delete("k1");

三、formData.append() 遇到的问题

1、formData使用append追加后console仍为空的问题

formData.append('image_url', files[0]);
console.log(formData)

　　解决：需要用 formData.get("键") 的方法获取值。

let formData = new FormData();
formData.append('image_url', files[0]);
console.log(formData.get('image_url'))

2、formData.append("files",filesArray) 添加文件无效的问题

　　选择多个文件一起上传，就参考选用了FormData实例通过append方法添加文件并发送，原代码是这么写的：

let formData = new FormData();
formData.append("files",this.createOperation.fileList);

　　这种以数组形式append的方式具有以下特征：

（1）append之后，调试发现formData为空，查阅资料得知formData需要使用FormData.get，FormData.getAll，FormData.keys等方法访问其内部的键值对。

（2）浏览器network调试面板中可看到发送的files参数为[object file]形式，而正确的形式应该是[binary]

　　解决方案：分多次向formData中同一个键名下添加一个文件即可。

this.createOperation.fileList.map(element => {
  formData.append("files", element);
});

四、使用 FormData 传文件流，传 json 数组对象（重点）

　　关于 FormData.append() 的参数，这里要注意下 value 字段，如果你要填入的是一个对象，会将它转换成字符串，也就是最后传给后台的都是 [object object]，这样后台当然是无法解析的。下边举个例子，大家就明白了

var json=[
　　{'name':'小明','age':15,'skills':['抽烟','喝酒','烫头'],'family':{'father':'大明','mohter':'小红'}},
　　{'name':'胖虎','age':17,'skills':['打架','打架','还是打架'],'family':{'father':'佐藤','mohter':'爱田'}},
]

　　首先我们先试一下，把小明的family对象传给后台。

var data=new FormData()
data.append('family',json[0].family)

　　结果被解析成了object object，有人该说了，你把它用 JSON.stringify 序列化之后不就行了，然后后端配合，再解码成json，对，这样确实行，但不要忘了，咱们还是需要传文件流的，文件流被序列化之后会被转化成一个空对象，这样后台就无法识别。由于时间原因，这里就不演示反面案例了。这里我们要用两个语法：

1、a['b'] 等于 a.b

2、c[0] 取得是c数组的第一项

　　正确方法：

var data=new FormData()
for(var i=0,len=json.length;i<len;i++){
        data.append('json['+i+'][name]',json[i].name)
        data.append('json['+i+'][age]',json[i].age)
        data.append('json['+i+'][family][father]',json[i].family.father)
        data.append('json['+i+'][family][mother]',json[i].family.mohter)
        for(var j=0,len2=json[i].skills.length;j<len2;j++){
            data.append('skills['+i+']['+j+']',json[i].skills[j])
        }
    }
     $.ajax({
         url:'demo.php',
         type: "Post",
         dataType: "json",
         cache: false,//上传文件无需缓存
         processData: false,//用于对data参数进行序列化处理 这里必须false
         contentType: false, //必须
         data:data,
         success:function (res) {
             console.log(res);
         },
         error:function (error) {
             console.log(error);
         }
     })

　　之后，我们再给小明和胖虎每人上传一张个人写真照（利用input file，文件流），这里我们利用input上传时的file对象，附上代码：

<input type="file" id="upload">
$('#upload').on('change',function (e) {
　　var file = e.target.files[0];
　　console.log(file);
　　data.append('json[0][image]',file)
})

　　这里需要注意的是：如果是继续上传照片，还是在这个字段 'json[0][image]' 里去 append file。如第 3 讲第 2 个问题。

　　这个 file 对象是一个含有二进制文件，这个对象如果直接序列化，会被转化为一个空对象，后台无法识别。所以如果有特殊的文件之类的，那就无法使用 JSON.stringify 序列化去传参数了。