如何让getFileDimensions返回Image对象.onload方法内的图片宽高值

问题原因 #

你当前的代码采用同步返回的写法，但FileReader.onload、Image.onload都属于异步回调逻辑，外层return执行时两个回调都还没触发，因此永远拿不到正确的宽高值。

解决方案 #

用Promise封装所有异步逻辑，调用时通过async/await或者.then()获取返回结果即可。

修正后的代码 #

export const getFileDimensions = file => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);

    // 处理文件读取错误
    reader.onerror = () => {
      reader.abort();
      reject(new Error('图片文件读取失败'));
    };

    reader.onload = e => {
      const image = new Image();

      // 处理图片加载错误
      image.onerror = () => reject(new Error('图片资源加载失败'));
      
      image.onload = () => {
        console.log("Image loaded", image.width, image.height);
        resolve({
          width: image.width,
          height: image.height
        });
      };

      image.src = e.target.result;
    };
  });
}

调用示例 #

• async/await写法（推荐）

// 只能在async标记的函数内部使用
const handleImageUpload = async (file) => {
  try {
    const { width, height } = await getFileDimensions(file);
    // 拿到宽高后的业务逻辑写在这里
    console.log('图片宽度：', width, '图片高度：', height);
  } catch (err) {
    console.error('获取图片尺寸失败：', err.message);
  }
}

• Promise.then写法

getFileDimensions(file).then(({ width, height }) => {
  // 拿到宽高后的业务逻辑写在这里
  console.log('图片宽度：', width, '图片高度：', height);
}).catch(err => {
  console.error('获取图片尺寸失败：', err.message);
})

内容的提问来源于stack exchange，提问作者kakakakakakakk