記一個 FormData 多檔案上傳問題

問題描述：

直接給

FormData

append

一個數組的話會變成一個字元串，這樣背景拿不到檔案資訊，如下：

const fd = new FormData();
fd.append('files', this.fileList);
console.log(fd.getAll('files'));
           

解決辦法：

const fd = new FormData();
this.fileList.forEach(item => fd.append('files', item));
console.log(fd.getAll('files'));
           

參考：

MDN

FormData

接口的

append()

方法 會添加一個新值到

FormData

對象内的一個已存在的鍵中，如果鍵不存在則會添加該鍵。

FormData.set

和

append()

的差別在于，如果指定的鍵已經存在，

FormData.set

會使用新值覆寫已有的值，而

append()

會把新值添加到已有值集合的後面。

跟正常表單資料一樣，你可以使用同一個名稱添加多個值 。例如 (為了與PHP命名習慣一緻在名稱中添加了[])：

formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');
formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');
           

這項技術使得多檔案上傳的處理更加簡單，因為所得資料結構更有利于循環。