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/*">

现在，上面的代码似乎没有返回错误。但是，我很好奇onload的{{1}}部分由于某种原因而未完成怎么办？我的imgElement的承诺将永远无法实现。我需要在getImageDimension()函数上添加reject块吗？

此外，如果getImageDimension()确实因某种原因失败了，可能是什么原因？

编辑

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

Answer 1

onload不能“返回错误”，相反，如果在加载图像时出错，则会调用onerror，并且永远不会调用onload。

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

onload是否有可能返回错误？

1 个答案: