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

【问题标题】：Failed to execute 'readAsDataURL' on 'FileReader': the object is already busy reading Blobs无法在“FileReader”上执行“readAsDataURL”：对象已经忙于读取 Blob
【发布时间】：2019-06-17 18:27:13
【问题描述】：

我想上传多张图片。当我选择多个图像时调用 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)
        }
}

【问题讨论】：

错误是什么？
如果我在你的位置而不是使用 base64，我会上传所有带有 formData 的文件

标签： javascript php laravel vue.js

【解决方案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)
        }
}

【讨论】：