Javascript FileReader JS抛出对象正忙于读取blob

我正在尝试使用filereader读取数组中多个文件的数据。但是有一个错误，表示对象已经在忙于读取blob

                    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);
                    }
                }
            }

flag=1；
var文件；
var fileRead=[]；
for（var i=0，f；f=changevent.target.files[i]；i++）{
reader.onload=函数（loadEvent）{
作用域$apply（函数（）{
如果（标志==1）{
fileRead.push（loadEvent.target.result）；
}
});
};
reader.readAsDataURL（f）；
}
对于（i=0；i

---

我曾尝试使用循环来查看该操作是否完成，但它最终以无限循环结束

您需要等待读取器完成读取，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();

---

您需要等待读取器完成读取，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();

---

这里有一段对我有用的东西。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)
        }
       }

---

这里有一段对我有用的东西。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)
        }
       }

---

应该是

reader.onloadend

而不是

reader.onload

也尝试过了。这与您调用的

reader.readAsDataURL（f）没有任何区别才能完成上一个文件
readAsDataURL
是异步的。为什么您认为必须提供一个
load
事件处理程序？你基本上是在告诉
reader
立即读取
n
文件。应该是
reader.onload
而不是
reader.onload
。onload

也试过了。这与您调用的

reader.readAsDataURL（f）没有任何区别才能完成上一个文件
readAsDataURL
是异步的。为什么您认为必须提供一个
load
事件处理程序？您基本上是在告诉
reader
立即读取
n
文件。