如何在Angular 2及以上版本中无需jQuery获取上传前图片宽高

你的思路完全没问题！不需要依赖jQuery，纯TypeScript就能轻松实现图片尺寸的验证。下面是具体的实现步骤和代码示例：

核心思路 #

通过FileReader读取选中的图片文件，再创建Image对象加载该文件，从而获取图片的宽高尺寸，之后就可以根据你的需求进行验证了。

完整实现代码 #

HTML部分（和你的代码保持一致，新增类型过滤更友好） #

<input #coverFilesInput class="file-input" type="file" (change)="onChange($event)" accept="image/*">

加上accept="image/*"可以限制用户只能选择图片文件，提前过滤非图片类型

TypeScript部分 #

onChange(event: Event): void {
  // 获取input元素和选中的文件，做类型断言保证TS类型安全
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
  
  if (!file) return;

  // 先验证文件类型（可选但推荐）
  if (!file.type.startsWith('image/')) {
    alert('请选择图片文件！');
    input.value = ''; // 清空选择，避免重复提交错误文件
    return;
  }

  // 读取文件并获取图片尺寸
  const reader = new FileReader();
  reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
      // 这里可以获取到图片的真实宽高
      const width = img.width;
      const height = img.height;

      // 示例：自定义尺寸验证规则（比如宽高都不小于500px）
      if (width < 500 || height < 500) {
        alert('图片尺寸过小，请选择宽高不小于500px的图片！');
        input.value = '';
        return;
      }

      // 验证通过，后续处理逻辑（比如上传、预览）
      console.log('图片尺寸验证通过', { width, height, file });
    };
    img.onerror = () => {
      alert('无法读取图片文件，请检查文件是否损坏！');
      input.value = '';
    };
    img.src = e.target?.result as string;
  };
  reader.readAsDataURL(file);
}

关键说明 #

• 类型安全：用as HTMLInputElement对event.target做类型断言，符合TypeScript的类型规范，避免滥用any
• 错误处理：覆盖了文件不存在、非图片类型、图片读取失败等场景，提升用户体验
• 灵活性：你可以根据需求修改尺寸规则，比如固定宽高比例、最大尺寸限制、最小分辨率要求等

总结一下，你的初始思路是正确的，只需要补充读取图片尺寸的逻辑即可，完全不需要依赖jQuery。

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