属性 'files' 在类型 'EventTarget' 上不存在打字稿错误

Question

我正在尝试从我的 ionic 2 应用程序访问输入文件的值，但我仍然面临属性文件在类型 'EventTarget' 上不存在的问题。因为它在 js 中正常工作但在 typescript 中不正常。代码如下：

  document.getElementById("customimage").onchange= function(e?) {
            var files: any = e.target.files[0]; 
              EXIF.getData(e.target.files[0], function() {
                  alert(EXIF.getTag(this,"GPSLatitude"));
              });
          }

请帮我解决这个问题，因为它没有构建我的 ionic 2 应用程序。

Answer 1

e.target 属性类型取决于您在 getElementById(...) 上返回的元素。 files 是 input 元素的属性：https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

在这种情况下，TypeScript 编译器不知道您正在返回一个 input 元素，并且我们没有特定于此的 Event class。所以，你可以创建一个像下面的代码：

interface HTMLInputEvent extends Event {
    target: HTMLInputElement & EventTarget;
}

document.getElementById("customimage").onchange = function(e?: HTMLInputEvent) {
    let files: any = e.target.files[0]; 
    //...
}

Answer 2

您可以将其转换为 HTMLInputElement:

document.getElementById("customimage").onchange = function(e: Event) {
    let file = (<HTMLInputElement>e.target).files[0];
    // rest of your code...
}

更新：

你也可以使用这个：

let file = (e.target as HTMLInputElement).files[0];

Answer 3

这行比较多，不过我觉得最清楚了

    const onChange = (event: Event) => {
      const target= event.target as HTMLInputElement;
      const file: File = (target.files as FileList)[0];
      /** do something with the file **/
    };

2022 年更新：有人正确地指出第二行的两个转换是不必要的，这是完全正确的，我已经修改了我的答案。

    const onChange = (event: React.ChangeEvent) => {
        const target= event.target as HTMLInputElement;
        const file = target.files[0];
        /** do something with the file **/
    };

Answer 4

我发现：

<input type="file"  accept="image/*" 
(change)="upload($event)">

和

<ion-input type="file"  accept="image/*" 
(change)="upload($event)"><ion-input>  or (ionChange)

不以相同的方式处理事件。因此 event.target 由不同的参数组成。

因此我没有使用 ion-input 标签，而是使用带有 (change)="upload($event)" 触发器的普通 angular <input> 标签。

它在 Ionic 4 上对我有用。

Answer 5

// use - ChangeEvent<HTMLInputElement>

document.getElementById("customimage").onchange= function(e?: ChangeEvent<HTMLInputElement>) {
            var files: any = e.target.files[0]; 
              EXIF.getData(e.target.files[0], function() {
                  alert(EXIF.getTag(this,"GPSLatitude"));
              });
          }

Answer 6

const handleFileInput = (event: ChangeEvent) => {
        const target = event.target as HTMLInputElement;
        const file: File = (target.files as FileList)[0];
        /** do something with the file **/
    };

我会将 Event 更改为 ChangeEvent，但是 Devin Clark 的其余回答很棒 :)

Answer 7

const onChange => (event: Event): void {
    const input = event.target as HTMLInputElement;

    if (!input.files?.length) {
        return;
    }

    const file = input.files[0];
    console.log(file);
}

Answer 8

最好尽可能避免类型转换。使用 e.currentTarget 而不是 e.target

Answer 9

我只是来解决同样的问题，当我使用时：

e.target.files

它说目标没有文件属性，所以正如你在类型脚本中所说的那样。您也可以使用：

e.target['files'][0]

它解决了我的问题。

属性 'files' 在类型 'EventTarget' 上不存在打字稿错误

Property 'files' does not exist on type 'EventTarget' error in typescript

typescript

ionic2

exif-js

angular