onload to return 有没有可能报错？

Question

我有以下函数来获取上传的图像文件的尺寸（宽度和高度）：

let target = document.getElementById('test');

function getImageDimension() {
  return new Promise((resolve, reject) => {
    let imgElement = new Image();
    imgElement.src = window.URL.createObjectURL(target.files[0]);
    
    imgElement.onload = () => {
      window.URL.revokeObjectURL(imgElement.src);
      resolve({
        width: imgElement.width,
        height: imgElement.height
      });
    };
  });
}

target.addEventListener('change', (e) => {
  let promise = new Promise((resolve, reject) => {
    //Some other stuffs before I actually get the dimension
    //I actually validate the file type here before trying to get the dimension of the file
    //For the sake of an example, I'll resolve immediately
    resolve('test');
  })
  .then(() => {
    return getImageDimension();
  })
  .then((dimension) => {
    console.log(dimension);
  })
  .catch((e) => {
    console.log(e.message);
  });
});

<input id = "test" type = "file" accept = "image/*">

现在以上似乎return没有错误。但是，我很好奇如果 imgElement 的 onload 部分由于某种原因从未完成会发生什么？我getImageDimension()的承诺永远不会兑现。我需要在我的 getImageDimension() 函数上添加一个 reject 块吗？

此外，如果 onload 确实以某种方式失败了，可能是什么原因？

编辑

我似乎发现了一件事可能导致 onload 失败：如果我在 addEventListener(...) 中删除 promise 块上的验证部分，我可以尝试上传一个 exe 文件，它的承诺永远不会在我的 getImageDimension() 部分得到解决。我该如何解决这个问题，使其 rejects?

Answer 1

onload 不能 "return an error"，相反，如果加载图像出错，会调用 onerror，并且永远不会调用 onload。

任何数量的事情都可以阻止图像加载，从而阻止 onload 被调用，包括来自服务器的任何 4xx 或 5xx 错误响应或根本无法连接到服务器，或者服务器的响应不是有效图像。

onload to return 有没有可能报错？

Is it possible for onload to return an error?

javascript

promise

es6-promise