无法在“FileReader”上执行“readAsDataURL”：该对象已忙于读取 Blob

Question

我想上传多张图片。当我选择多个图像时，将调用 photoSelected 函数。我想使用 base64 但它在控制台上显示此错误。

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

您在 for 循环外部定义了读取器，并在循环内使用相同的读取器。这导致读者忙碌。您可以通过使用 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]);
       }
}

由于您已经在使用let并且它使用块作用域，因此您还可以使用每个循环创建一个读取器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)
        }
}