FormData常用方法和在vue中的使用教程

一 : 简介

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过前端Ajax 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”，它会使用和表单一样的格式。

FormData的主要用途有两个：

1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2、异步上传文件

二 : 如何使用

(1) 通过FormData()构造函数来创建一个空的FormData对象

//通过new 一个FormData()构造函数来创建一个空对象
let formData = new FormData()

(2) 常用方法

• FormData.append()
  向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

formData.append("name", '小明');
formData.append("meetingRoomId", this.form.meetingRoomId);

• FormData.delete()
  从 FormData 对象里面删除一个键值对。

formData.delete("name");
formData.delete("meetingRoomId");

• FormData.get()
  返回在 FormData 对象中与给定键关联的第一个值。

formData.get('name')
console.log(formData.get('name')); //'小明'

• FormData.getAll();
  getAll()方法会返回该 FormData 对象指定 key 的所有值的数组。

formData.append('username', 'Chris');
formData.append('username', 'Bob');
formData.getAll('username'); // ["Chris", "Bob"]

• FormData.has()
  返回一个布尔值表明 FormData 对象是否包含某些键。

formData.append('username', 'Chris');
formData.has('username'); //  true

• FormData.set()
  给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。

formData.set('username', 'Chris');
//当第二个参数传递的是一个blob对象（Blob）或者file对象（File），
//filename参数就代表传给服务端的文件名。
formData.set('userpic', myFileInput.files[0], 'chris.jpg');

三 : 在vue中使用FormData格式进行axios请求

var formData = new FormData();
formData.append("name", this.form.name);
formData.append("meetingRoomId", this.form.meetingRoomId);
formData.append("startTime", this.form.startTime);
formData.append("endTime", this.form.endTime);
formData.append("meetingTypeId", this.form.meetingTypeId);
formData.append("applyAccountId", this.form.applyAccountId);
formData.append("masterAccountId", this.form.masterAccountId);
formData.append("attendAccountIds", this.form.attendAccountIds);
formData.append("description", this.form.description);
formData.append("status", this.form.status); 
this.form.files.forEach(el => {
     formData.append("files", el); // 这里是支持多文件上传的,FormData对象可以支持同样的key值在对象中创建
  });
this.$post2("base/meeting", formData).then(res => { //进行axios请求,在这里我封装的Content-Type: multipart/form-data;
	console.log(res);
})

注 : 根据业务场景,文件是和参数一块上传到服务器的,没有进行分离,这里的文件File参数可以用原生input组件上传获取,也可以用自己的UI框架在Upload组件的beforeUpload(上传文件前的钩子)进行获取到File参数信息。（有问题欢迎评论私信）