Angular中的文件输入事件类型答案

【问题标题】：file Input Event type in AngularAngular中的文件输入事件类型
【发布时间】：2020-03-31 03:48:39
【问题描述】：

所以我已经使用 Angular 和 Typescript 很长时间了。我似乎无法找出输入文件的类型。

例如：

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

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

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

【问题讨论】：

标签： angular typescript typescript-typings

【解决方案1】：

类型是Event

fileChangeEvent(e: Event){}

【讨论】：

使用事件的问题是。如果您键入 e.target，则该类型只有 3 个功能。 AddEventListener、DispatchEvent、RemoveEventListener。所以从技术上讲，类型不正确。
取决于您导入的内容，我猜，VSC 会立即自动建议正确的“事件”类型

【解决方案2】：

使用File

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

试试这个

component.html

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

component.ts

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

【讨论】：

这可能会起作用，因为您传入的文件是类型文件。但仍然提出了 $event 是什么类型的问题。奇怪的是没有明确的答案。
它可以工作，但它需要和调整，而不是fileName = e.files[0];，它必须是const fileName = e[0].name;，谢谢。
另外，它没有太大变化，但e 不会是File 的数组，而是FileList。最明显的区别是FileList 没有实现Iterator 协议，所以for of 循环将不起作用。 developer.mozilla.org/en-US/docs/Web/API/FileList
我们曾经这样做过（类型为FileList | readonly File[]），但如果我们激活Ivy 的strictTemplates 选项，则会在以下几行出错：TS2339: Property 'files' does not exist on type 'EventTarget' 和TS2531: Object is possibly 'null'。所以要么我们使用丑陋的$any($event.target).files，要么我们回到输入$event。
如果您尝试 $event.target?.files 是否有效？

【解决方案3】：

获取文件类型的一行语句：

fileInput: any
fetchFileType($event);

fetchFileType(fileInput: any) {
  fileName = this.fileInput.target.files[0];
  fileType = fileName.type;
}

【讨论】：

如果绝对必要，真的不应该使用任何东西。另外，这正是问题所在。类型。

【解决方案4】：

对于 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);
    }
}

希望这会有所帮助。请分享您的反馈。

【讨论】：

小心使用 event.currentTarget。它包含一个附加处理程序的元素，但不包含触发事件的元素。
如上评论者所说，应该是 event.target 见Comparison of Event Targets。

【解决方案5】：

Angular 10 及更高版本：

component.html

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

component.ts

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

【讨论】：