FormData常用方法和在vue中的使用教程
一 : 简介FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过前端Ajax 方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”,它会使用和表单一样的格式。FormData的主要用途有两个:1、将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单
·
一 : 简介
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
参数信息。(有问题欢迎评论私信)
更多推荐
所有评论(0)