前端處理 input 元素的 files 屬性時報錯【m.map is not a function】

問題描述

在使用 HTML 的檔案上傳元素

<input type="file">

時，處理其傳回的

files

資料時遇到了這個報錯

m.map is not a function

。

我的代碼如下：

const uploadCSVFiles = event.target.files;
uploadCSVFiles.map((f) => {
        if (f) {
          setUploadText(`正在上傳${f.name}`);
          // 省略
        }
}
           

輸出 event.target.files，得到：

從圖檔上可以看出這是一個

FileList

類型的資料。

解決方式

經過查閱資料後才發現，這個

FileList

類型雖然看起來是個數組，但其實并不是數組，是以不能使用

map

方法。

map

方法的全稱是

Array.prototype.map()

，屬于數組類型的方法。

是以我改為使用

for (const ... of ... )

的方式去周遊

FileList

類型，如下：

for (const f of event.target.files) {
      setUploadVis(true);
      if (f) {
        setUploadText(`正在上傳 ${f.name} ...`);
        // 省略
      }
}