等待.onload并检查多个图像的分辨率

Question

用户有一个按钮，他可以添加多个图像。现在，我需要检查每个图像分辨率，如果所有分辨率都高于800x600，那么我需要上传图像，否则，抛出一个错误。

需要看起来像这样:

prepareFilesList(files) {
if (!this.verifyFilesResolution(files)) {
this.selectedFiles = files; 
this.uploadFiles();
} else {
return this.toastr.error('Image must be at least 800x600 .');
}
}
verifyFilesResolution(files): boolean {
let err = false;
if (files && files.length > 0) {
for (let i = 0; i < files.length; i++) {
let img = new Image();

img.src = window.URL.createObjectURL(files[i]);
img.onload = function () {
if (img.width <= 800 || img.height <= 600) {
err = true;
}
};
}
}
return err;
}

但是，在这种情况下，它不起作用，因为它不等待.onload，并且在所有情况下它都会抛出错误。不知怎的，我需要等待.onload并循环遍历所有文件或至少一个分辨率不高于800x600的文件。

我该怎么做?谢谢你。

Answer 1

onload函数是异步回调的，所以你的循环所做的是你的代码现在写的是设置回调，它永远不会等待他们完成。您需要更像这样的东西(这是一个一般的想法——我还没有测试过):

prepareFilesList(files) {
this.verifyFilesResolution(files, success => {
if (success) {
this.selectedFiles = files; 
this.uploadFiles();
} else {
return this.toastr.error('Image must be at least 800x600 .');
}
});
}
verifyFilesResolution(files, callback): boolean {
let err = false;
let imagesLoaded = 0;
if (files && files.length > 0) {
for (let i = 0; i < files.length; i++) {
let img = new Image();

img.src = window.URL.createObjectURL(files[i]);
img.onload = function () {
if (img.width <= 800 || img.height <= 600) {
err = true;
}
if (++imagesLoaded === files.length) {
callback(!err);
}
};
}
}
return err;
}

注意:您应该查看onerror并处理失败的图像加载。