FormData接口的使用-Vue

一 、概況

FormData接口提供了一種表示表單數據的鍵值對 name/value 的構造方式，能夠將數據通過前端 Ajax 請求發送給后端。

FormData的主要用途有兩個：

1. 1. 異步上傳文件。

   2. 實現form表單數據的序列化，將數據以鍵值對 name/value 的形式傳到后台，從而減少表單元素的拼接，提高工作效率。

二、如何使用

（1）創建一個FormData對象

// 通過new FormData() 來創建一個對象
let formData = new FormData();

（2）對象名.append(name,value)

append(name: string, value: string | Blob, fileName?: string): void;

向FormData中添加新的屬性值，就算FormData里面已經存在了對應的name值，也不會被覆蓋掉，而是新增一個屬性值；如果存在一個name對應多個value，可通過getAll()方法獲取。

formData.append('status', this.addForm.status);

（3）對象名.delete(name)

delete(name: string): void;

通過name刪除FormData中對應的value。

formData.delete('status');

（4）對象名.get(name)

get(name: string): FormDataEntryValue | null;

從FormData中獲取name對應的value。如果name對應多個value，此方法返回第一個value值。

const status= formData.get('status');

（5）對象名.getAll(name)

getAll(name: string): FormDataEntryValue[];

從FormData中獲取key對應的value。如果name對應多個value，此方法返回value數組。

const status= formData.getAll('status');

（6）對象名.has(name)

has(name: string): boolean;

判斷FormData中是否存在對應的name。存在，返回true；不存在，返回false。

formData.has('status')

（7）對象名.set(name,value)

set(name: string, value: string | Blob, fileName?: string): void;

給FormData設置一個屬性值，如果FormData對應的屬性值存在 則覆蓋之前的屬性值，否則新增一個屬性值;

如果第二個參數傳遞的是一個Blob對象或者File對象，那么第三個參數fileName就需要傳入文件名(傳給服務端)。

formData.set('status','2')
formData.set('files', myFile.file(0),'myFileName.png')

（8）對象名.entries()

方法返回一個迭代器（iterator），可以遍歷訪問FormData中的所有鍵值對。

1 for(var pair of formData.entries()) {
2    console.log(pair[0]+ ', '+ pair[1]); // pair[0]為name ，pair[1]為value
3 }

（9）對象名.keys()

該方法返回一個迭代器（iterator），可以遍歷訪問FormData中的所有name。

1 for (var name of formData.keys()) {
2    console.log(name);
3 }

（10）對象名.values()

方法返回一個迭代器（iterator），可以遍歷訪問FormData中的所有value。

for (var value of formData.values()) {
   console.log(value);
}