TypeScript中img.onload访问全局变量及图片尺寸验证问题

你碰到的是JavaScript异步操作的典型坑点：img.onload是一个异步回调函数，它只会在图片完全加载完成后才会执行，但你写的console.log(valido)是同步代码，会在图片加载还没完成的时候就先跑了——这时候回调里的valido = false根本还没执行，所以打印出来的自然是初始值true。

根据你的使用场景，有两种常用的处理方式：

方式1：把后续逻辑直接放到onload回调里 #

既然验证逻辑必须等图片加载完才能执行，那所有依赖valido的代码都可以直接写到onload函数内部，确保顺序执行：

const img = new Image();
img.src = window.URL.createObjectURL(event.target.files[0]);
img.onload = function () {
  const width = img.naturalWidth;
  const height = img.naturalHeight;
  window.URL.revokeObjectURL(img.src);
  
  let valido = true;
  if (width > 588 || height > 204) {
    valido = false;
    console.log('图片尺寸超出限制');
  }
  
  // 所有需要用到valido的逻辑都放在这里
  console.log(valido); // 这里就能拿到正确的结果了
  // 比如：if (!valido) { 提示用户重新上传 }
};

方式2：用Promise封装，配合async/await让代码更清晰 #

如果你的验证逻辑需要和其他异步操作配合，或者想让代码看起来更像同步写法，可以用Promise把图片加载和验证逻辑封装起来：

// 封装一个验证图片尺寸的异步函数
function validateImageSize(file) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = window.URL.createObjectURL(file);
    
    img.onload = function () {
      const width = img.naturalWidth;
      const height = img.naturalHeight;
      window.URL.revokeObjectURL(img.src);
      // 验证通过返回true，否则返回false
      resolve(width <= 588 && height <= 204);
    };
    
    // 别忘了处理图片加载失败的情况（比如文件不是有效图片）
    img.onerror = function () {
      window.URL.revokeObjectURL(img.src);
      resolve(false); // 加载失败也视为验证不通过
    };
  });
}

// 使用的时候用async/await调用
async function handleFileUpload(event) {
  const file = event.target.files[0];
  if (!file) return;
  
  const valido = await validateImageSize(file);
  console.log(valido); // 这里能拿到正确的验证结果
  // 后续的表单提交、用户提示等逻辑都可以在这里处理
}

JavaScript里的异步操作（比如图片加载、网络请求）不会阻塞代码执行，所以永远不要试图在异步回调外面直接获取回调里修改的变量——必须等异步操作完成后再处理结果。

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