Angular 中的文件输入事件类型

Question

所以我一直在使用 Angular 和 Typescript。我似乎无法找出输入文件的类型是什么。

例如：

<input type="file" (change)="fileChangeEvent($event)">

fileChangeEvent(e:?????){}

所有示例仅使用没有任何类型的事件，我很想知道这种类型是否存在。

Answer 1

对于 Angular 10 严格类型模式，我们需要在参数中提及类型。您可以按照这种方式从文件输入事件中实现文件列表

// HTML
<input type="file" (change)="uploadFile($event)">

// TS
uploadFile(event: Event) {
    const element = event.currentTarget as HTMLInputElement;
    let fileList: FileList | null = element.files;
    if (fileList) {
      console.log("FileUpload -> files", fileList);
    }
}

希望这可以帮助。请分享您的反馈。

Answer 2

使用文件

File 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

尝试这个

组件.html

<input type="file" (change)="fileChangeEvent($event.target.files)">

组件.ts

fileChangeEvent(e: File[]){
    fileName = e[0];
    fileType = fileName.type;
}

Answer 3

Angular 10 及以上：

组件.html

    <input type="file" (change)="upload($event)">

组件.ts

  upload(event: Event) {
      const target = event.target as HTMLInputElement;
      const files = target.files as FileList;
      console.log(files);
  }