前后端交互之FormData格式的参数传递

前言：前后端在交互的时候，一般如果后端需要前端返回一个文件类型的数据，在一般情况下，前端会有FormData类型的数据格式来进行数据的传输，来上传文件和数据。FormData主要提供了一种表示表单数据的键值对key/value的构造方式，从命名我们可以得出，FormData是专门为表单传输量身定做的类型，但是FormData的功能要比application/json强的多，使用FormData也可以用来传递文件数据，而且在window上也直接挂载了FormData对象，方便我们使用。

一.FormData在前端的使用：

      1.创建一个FormData类型的对象:

let formData=new FormData();  //当前formData为空

        2.使用表单传值：可以使用FormData中的append方法来添加键值对到formData对象里面，但是其实FormData的原型上有很多的方法，比如set,get,values,has等方法，但是实际在开发过程中，最经常使用的也就是append方法了,一般使用append方法向FormData中添加数据，并且使用XMLHttpRequest来发送数据。

formData.append("username","张峻豪");
formData.append("password",'123456');
formData.append("age",100);
formData.append("sex","man");

 二.获取FormData中的值：

     由于FormData是一个序列化的对象，不是一个普通的对象，因此如果想获取到FormData中的值，要使用FormData中的get方法来获取FormData中的值 

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

三.append和set的区别：

       FormData中append方法如果是key已经存在,就会附加value到已有值集合的后面，但是使用set方法则会将新增的value直接覆盖到已有的值上，具体区别如以下代码所示：

formData.append("username", "张极");
formData.getAll("username");//['张峻豪','张极']

formData.set("username","张极");
formData.getAll("username");//张极

四.遍历FormData中的数据：

       使用一个entries()获取一个迭代器，然后遍历所有的数据

var formData = new FormData();

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}

从上述代码中我们可以看到返回迭代器的规则：

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

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

   3.返回的对象的value属性以数组的形式存储了一对key/value，当数组下标0为key，下标1为value,如果一个key值对应多个value，会变成多对key/value返回；

 五.FormData参数传递在uniapp中的使用：

     在一个项目中，后端需要前端返回一个FormData类型的文件参数给后端接口，但是在使用XMLHttpRequest发送数据的时候，添加了请求头为Content-Type：multipart/form-data也没有奏效，后来查阅uniapp文档，发现uniapp中有自带的传输文件的API，使用uniapp自带的传输文件的API会自动把传输的数据解析成FormData类型的，浏览器也会把请求头自动解析为Content-Type：multipart/form-data类型的，所以uniapp中自带的传输文件的API方便了我们在写项目中来传输文件：在uniapp中使用文件传输的API如下代码所示：

uploadFilePromise(url) {
						return new Promise((resolve, reject) => {
							let a = uni.uploadFile({  //uniapp中自带的传输文件的API
								url: '/api/v1/task/imageAndSuccess', // 接口地址
								filePath: url,   //文件的路径
								name: 'file',
								header:{
									'Authorization':'Bearer '+uni.getStorageSync('token'),
								},//token认证
							
								success: (res) => {	
									setTimeout(() => {
										resolve(res.data.data)
									}, 1000)
									console.log(res);//成功的回调
								},
								
							});
						})
					},