无法在'FileReader'上执行'readAsDataURL'：对象已经忙于读取Blob

Question

I want to upload multiple images. When I choose multiple images photoSelected function is called. I want to use base64 but it shows this error on console.

PhotoSelected (e){
       Let files = e.target.files;
       Let reader = new FileReader();
       Let file;
       For (let i=0; I<files.length ; i++){
            file = files [i];
            reader.onload = (file) => {
                   This.product.photo[i] = reader.result;
             }
            reader.readAsDataURL(file)
        }
}

Answer 1

you defined the reader outside the for loop and use the same reader within the loop. this results in the reader being busy. You can solve this by creating one reader for each loop in its own scope, using an IIFE.

PhotoSelected (e){
       let files = e.target.files;
       let reader = new FileReader();
       let file;
       for (let i=0; I<files.length ; i++){
           (function(file) {
            var reader = new FileReader();
            reader.onload = (file) => {
              this.product.photo[i] = reader.result;
            }
            reader.readAsDataURL(file)
          })(files[i]);
       }
}

Since you are using let already and it uses block scope, you could also create a reader each loop using let .

PhotoSelected (e){
       let files = e.target.files;

       let file;
       for (let i=0; I<files.length ; i++){
            let reader = new FileReader();
            file = files [i];
            reader.onload = (file) => {
                   this.product.photo[i] = reader.result;
             }
            reader.readAsDataURL(file)
        }
}