财产'档案'在类型' EventTarget'上不存在打字稿中的错误

时间:2017-04-03 04:36:38

标签: angular typescript ionic2 exif-js

我正在尝试从我的离子2应用程序访问输入文件的值,但我仍然面对类型' EventTarget'中存在的属性文件问题。 因为它适用于js而不是打字稿。 代码如下:

  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"));
              });
          }

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

9 个答案:

答案 0 :(得分:35)

您可以将其转换为 HTMLInputElement

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

答案 1 :(得分:27)

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

在这种情况下,TypeScript编译器不知道您正在返回input元素,并且我们没有特定于此的Event类。因此,您可以创建一个类似下面的代码:

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

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

答案 2 :(得分:8)

最简单的解决方案是将e声明为any

e.g

document.getElementById('customimage').onchange = (e: any) => {
    let files = e.target.files[0];
    ...
};

但是你丢失了类型信息。更安全的方法可能是根据https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload声明您自己的FileEvent类型。

答案 3 :(得分:7)

这是更多行,但我认为这是最清楚的。

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

答案 4 :(得分:3)

// 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"));
              });
          }

答案 5 :(得分:0)

我发现:

<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标签,而是使用带有<input>触发器的普通角度(change)="upload($event)"标签。

它在Ionic 4上对我有用。

答案 6 :(得分:0)

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,但是德文·克拉克的其余答案都很棒:)

答案 7 :(得分:0)

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

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

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

答案 8 :(得分:0)

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