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

最新推荐文章于 2025-02-21 19:06:16 发布

阿威ztw

最新推荐文章于 2025-02-21 19:06:16 发布

阅读量1.6w

点赞数 8

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/m0_49989338/article/details/111308568

版权

一 : 简介

`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);
})