一 : 简介

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参数信息。(有问题欢迎评论私信)

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐