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

Failed to execute 'readAsDataURL' on 'FileReader': the object is already busy reading Blobs

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

1
2
3
4
5
6
7
8
9
10
11
12

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

相关讨论

您在for循环外定义了阅读器，并在循环内使用了相同的阅读器。这导致阅读器很忙。您可以通过使用IIFE在其自己的范围内为每个循环创建一个读取器来解决此问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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在每个循环中创建一个读取器。

1
2
3
4
5
6
7
8
9
10
11
12
13

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