Vue.js实现文件上传前校验图片宽高、大小的方法及异常修复

• 核心错误是image.src赋值对象错误：你当前给Image实例绑定的是上传前的旧资源地址this.upload_header，而非刚读取到的新图片的DataURL（也就是e.target.result），所以永远拿不到新上传图片的宽高。
• 校验顺序不合理：文件类型、大小这类可以同步判断的校验，不需要等到图片资源加载完成再执行，提前校验失败可直接终止逻辑，减少不必要的资源加载。
• 缺少异常兜底：未处理图片加载失败的场景（比如用户修改后缀名伪装的图片文件），会导致校验状态卡死。

onFileInputChange(event: any): FileReader {
  const files = event.target.files || event.dataTransfer.files
  const reader = new FileReader()
  reader.readAsDataURL(files[0])
  return reader
}

onThemeChange(event: any) {
  const imageType = ['image/png', 'image/gif', 'image/jpeg']
  const file = event.target.files?.[0]
  // 先做同步校验，提前拦截不符合要求的文件
  if (!file) {
    this.errorUploadFile = true
    return
  }
  if (!imageType.includes(file.type)) {
    this.errorUploadFile = true
    return
  }
  if (file.size >= 26214400) {
    this.errorUploadFile = true
    return
  }
  // 同步校验通过后再处理宽高校验
  this.onFileInputChange(event).onload = (e: any) => {
    const image = new Image()
    // 赋值新读取到的图片DataURL
    image.src = e.target.result
    image.onload = () => {
      if (image.width > 500 && image.height > 100) {
        // 校验全部通过再替换资源
        this.upload_header = e.target.result
        console.log('图片校验通过', image.width, image.height)
      } else {
        this.errorUploadFile = true
      }
    }
    // 兜底图片加载失败的场景
    image.onerror = () => {
      this.errorUploadFile = true
    }
  }
}

• 先执行同步校验：判断文件是否存在、文件格式是否为允许的图片类型、文件大小是否小于25M，任意一项不满足直接抛出错误，终止后续逻辑。
• 同步校验通过后，读取文件为DataURL，赋值给新创建的Image实例，加载完成后读取宽高进行校验。
• 宽高校验通过后，再将新的DataURL赋值给this.upload_header完成资源替换，所有失败场景都统一触发错误提示。

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