如何在Angular(TypeScript)中验证文件是否损坏？

HTML 部分 #

保留你现有的input标签，可新增结果提示区域：

<input type="file" name="file" accept=".png,.jpg,.jpeg" (change)="onFileSelected($event)" required>
<div *ngIf="validationResult" class="validation-tip">
  {{ validationResult }}
</div>

TypeScript 组件实现 #

核心逻辑是利用浏览器原生Image对象加载图片——损坏的图片无法正常解析会触发error事件，正常图片则触发load事件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-image-checker',
  templateUrl: './image-checker.component.html',
  styleUrls: ['./image-checker.component.css']
})
export class ImageCheckerComponent {
  validationResult: string = '';

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    const files = input.files;

    if (!files?.length) {
      this.validationResult = '请选择图片文件';
      return;
    }

    // 遍历所有选中的文件（支持多选）
    Array.from(files).forEach(file => {
      // 前置校验：过滤非图片类型（防止前端accept限制被绕过）
      if (!file.type.startsWith('image/')) {
        this.validationResult = `${file.name} 不是有效图片文件`;
        return;
      }

      const img = new Image();
      const objectUrl = URL.createObjectURL(file);

      // 图片加载成功：文件完好
      img.onload = () => {
        this.validationResult = `${file.name} 是完好的图片`;
        URL.revokeObjectURL(objectUrl); // 释放内存
      };

      // 图片加载失败：文件损坏或无法识别
      img.onerror = () => {
        this.validationResult = `${file.name} 已损坏或无法解析`;
        URL.revokeObjectURL(objectUrl); // 释放内存
      };

      img.src = objectUrl;
    });
  }
}

补充说明 #

• 支持所有浏览器可识别的图片格式：除PNG/JPG外，GIF、WebP等格式也能验证，无需额外修改。
• 内存优化：每次加载完成后必须调用URL.revokeObjectURL释放临时创建的文件链接，避免内存泄漏。
• 批量验证：如果需要同时验证多个文件，可修改逻辑将每个文件的验证结果存入数组，再统一展示。

内容的提问来源于stack exchange，提问作者Mateusz Wąsik