Question

我正在尝试使用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);
                    }
                }
            }

我已经尝试使用循环来查看该操作是否已完成，但最终会在无限循环中结束。

Answer 1

你需要等待读者完成阅读，文件读取器是异步的，所以你不能在for中做到这一点。 Haven没试过，但是这是怎么做的：

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

FileReader JS抛出对象正在忙着读取blob

2 个答案: