用FileReader讀取多個文件並獲取文件列表

所以我有文件的FileList，我需要將它們全部讀取到一個數組即ie。 [fileData1, fileData2]，以便我可以將所有文件發送到我的後端。我堅持所有的異步操作，我不知道如何等待事情完成。我需要一種方法來檢測何時可以向後端發出請求。我也希望以編程的功能性方式做到這一點。對不起，如果問題不清楚。用FileReader讀取多個文件並獲取文件列表

files.map((file) => { 
     const fr = new FileReader(); 

     fr.readAsDataURL(file) 

     fr.addEventListener('load', (event) => { 
      // This is what I need to get to an array 
      const fileData = event.target.value.substr(fr.result.indexOf(',') + 1); 

     }) 
    }) 
//Here I need to make a single post request with all the files in it

來源

2016-09-14 user2933157

既然你添加的functional-programming標籤，怎麼樣一個良好的老式遞歸函數：

function read_files(cur_file) { 
    if (cur_file < files.length) { 
     // read the next file 
     const fr = new FileReader(); 
     fr.readAsDataURL(files[cur_file]); 
     fr.addEventListener('load', (event) => { 
      // extract the file data from event here 
      read_files(cur_file+1); 
     } 
    } 
    else { 
     // we've read all the files 
     // send the request 
    } 
} 

read_files(0);

來源

2016-09-14 13:55:58 redneb

cur_file計數器有點打破功能編程的永恆法則。除此之外，如何將文件提取到加載函數之外，而不使用全局變量。 – user2933157

@ user2933157你對'cur_file'說得對，它不是全局變量的原因，我改變了我的代碼。至於第二個問題，您可以將一個數組作爲參數添加到'read_files'並在那裏累積數據。 – redneb

謝謝！當我有機會測試它時，我會在明天嘗試。 – user2933157

用FileReader讀取多個文件並獲取文件列表

回答

相關問題