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

阿新 • • 發佈：2020-12-18

一 : 簡介

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