記一個 FormData 多檔案上傳問題

muuma發表於2019-04-04
ORM

問題描述：

直接給 FormData append 一個陣列的話會變成一個字串，這樣後臺拿不到檔案資訊，如下：

const fd = new FormData();
fd.append('files', this.fileList);
console.log(fd.getAll('files'));
複製程式碼

fd.append('files', this.fileList);

解決辦法：

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

this.fileList.forEach(item => fd.append('files', item));

參考：

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');
複製程式碼

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

相關文章