Angular文件上传遇TS2345错误：Event无法分配给HtmlInputEvent如何解决？

数据老陈

2026-9-27

问题根因

Angular模板中change事件默认传递的$event是原生Event类型，你自定义的HtmlInputEvent接口将target定义为非空的HTMLInputElement类型，TS严格模式下类型不匹配触发编译报错。

解决方案

有两种可行方案，推荐第二种更符合TS类型安全规范：

方案1：模板侧直接类型断言

直接在模板调用方法时将$event断言为你自定义的HtmlInputEvent类型即可，无需修改组件逻辑：

<input class="btn btn-primary" (change)="imgSelected($event as HtmlInputEvent)" type="file" style="width: 100% !important;">

方案2：组件侧做类型收窄（推荐）

不需要自定义HtmlInputEvent接口，直接使用原生Event类型作为参数，在方法内部做类型判断和收窄，同时处理target可能为null的情况：

组件代码修改如下：

export class AppComponent implements OnInit {
  // 非空断言! 告知TS该属性后续会被赋值，避免初始化校验报错
  public file!: File;
  // 注意使用基础类型小写string，不要用包装类String
  public imgSelect : string | ArrayBuffer;

  imgSelected(event: Event){
    // 先做类型断言，标记target可能为HTMLInputElement或null
    const inputTarget = event.target as HTMLInputElement | null;
    // 可选链判断同时覆盖target为null、files为空的情况，TS会自动收窄类型
    if(inputTarget?.files?.length) {
      this.file = inputTarget.files[0];
      const reader = new FileReader();
      reader.onload = () => this.imgSelect = reader.result as string;
      reader.readAsDataURL(this.file);
    }
  }
}