如何从异步函数获取布尔值，验证图片尺寸超限以限制上传？

首先纠正原代码的核心问题：addEventListener 不返回 Promise，直接用 await 无效；事件回调内的 return 无法传递到外层异步函数。同时原逻辑不符合需求（原代码会把非100x100的所有图片都判定为无效，而需求是仅宽/高超过100时返回true）。

下面是修复后的代码，通过Promise包装异步操作实现正确返回布尔值：

const isImageOver100Size = async (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    // 处理FileReader加载完成
    reader.onload = (e) => {
      const image = new Image();

      // 处理图片加载完成
      image.onload = () => {
        // 核心逻辑：判断宽或高是否超过100
        const isOverSize = image.height > 100 || image.width > 100;
        resolve(isOverSize);
      };

      // 处理图片加载错误
      image.onerror = (error) => reject(new Error('图片加载失败：' + error));
      image.src = e.target.result;
    };

    // 处理FileReader错误
    reader.onerror = (error) => reject(new Error('文件读取失败：' + error));
    reader.readAsDataURL(file);
  });
};

使用方式 #

1. 用.then()链式调用 #

// 假设你有一个File对象和存储图片的数组
const targetFile = // 你的File实例
const validImages = [];

isImageOver100Size(targetFile)
  .then((isOver) => {
    if (!isOver) {
      validImages.push(targetFile);
      console.log('图片已加入数组');
    } else {
      console.log('图片尺寸超过100，拒绝加入');
    }
  })
  .catch((err) => {
    console.error(err.message);
  });

2. 在异步函数内用await #

async function handleImageFile(file) {
  const validImages = [];
  try {
    const isOver = await isImageOver100Size(file);
    if (!isOver) {
      validImages.push(file);
      console.log('图片已加入数组');
    } else {
      console.log('图片尺寸超过100，拒绝加入');
    }
  } catch (err) {
    console.error(err.message);
  }
}

// 调用函数
handleImageFile(yourFile);

关键修复点 #

• 将FileReader和Image的异步加载逻辑封装进Promise，通过resolve传递最终判断结果
• 修正判断逻辑：仅当宽/高大于100时返回true，符合需求
• 添加错误捕获逻辑，避免异步操作失败时出现静默错误

内容的提问来源于stack exchange，提问作者fullstack-developer