前言:前后端在交互的时候,一般如果后端需要前端返回一个文件类型的数据,在一般情况下,前端会有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);//成功的回调
},
});
})
},