FileReader JS throws Объект занят чтением blobs

Question

Я пытаюсь использовать filereader для чтения данных из нескольких файлов в массиве. Но есть ошибка, говорящая, что объект уже занят чтением Blobs.

    flag = 1; 
        var file; 
        var fileRead = []; 
        for (var i = 0, f; f = changeEvent.target.files[i]; i++) { 
         reader.onload = function(loadEvent) { 
          scope.$apply(function() { 
           if (flag == 1) { 
            fileRead.push(loadEvent.target.result); 

           } 
          }); 
         }; 

         reader.readAsDataURL(f); 
        } 

        for (i = 0; i < changeEvent.target.files.length; i++) { 
         file = changeEvent.target.files[i]; 
         fileName.push(file.name); 
        } 
       } 
      } 

Я попытался использовать цикл, чтобы убедиться, что эта операция выполнена, но она заканчивается бесконечным циклом.

Answer 1

Вам нужно дождаться, когда читатель закончит чтение, filereader будет асинхронным, так что вы не можете сделать это в for. Не пробовал, но вот как это делается:

function readFiles() { 
    if (changeEvent.target.files.length > 0) { // if we still have files left 
     var file = changeEvent.target.files.shift(); // remove first from queue and store in file 

     reader.onloadend = function (loadEvent) { // when finished reading file, call recursive readFiles function 
      fileRead.push(loadEvent.target.result); 
      readFiles(); 
     } 
     reader.readAsDataURL(file); 

    } else { 
     finishedReadingFiles() // no more files to read 
    } 
} 
readFiles(); 

Answer 2

Вот фрагмент того, что сработало для меня. readAsDataURL является асинхронным, поэтому вам нужно дождаться, когда файл будет прочитан, прежде чем работать над следующим. Убедитесь, что вы читаете читателя в цикле.

 var files = e.target.files; 

     if(files) { 
     for (let i = 0, f; f = files[i]; i++) { 
      var reader = new FileReader(); 
      reader.onloadend = function(output){ 
       console.log('output', output.target.result) 
       console.log('fileNamnes', f.name) 
      }.bind(this); 
      reader.readAsDataURL(f) 
     } 
     }