web-dev-qa-db-ja.com

typescriptのタイプ 'EventTarget'エラーでプロパティ 'files'は存在しません

ionic 2アプリケーションから入力ファイルの値にアクセスしようとしていますが、タイプ 'EventTarget'にプロパティファイルが存在しないという問題に直面しています。 TypeScriptではなく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"));
              });
          }

ionic 2アプリケーションをビルドしていないので、この問題の解決にご協力ください。

angulartypescriptionic2exif-js
26
Chirag Chaudhari

_e.target_プロパティタイプは、getElementById(...)で返す要素によって異なります。 filesはinput要素のプロパティです： 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]; 
    //...
}
_
29
Diullei

HTMLInputElementとしてキャストできます：

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

これはより多くの行ですが、私はそれが最も明確だと思います。

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

最も簡単な解決策は、eをanyとして宣言することです

例えば

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

ただし、タイプ情報は失われます。より安全なアプローチは、 https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload に基づいて独自のFileEvent型を宣言することです。

7
shusson

私はそれを見つけました：

<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タグを使用しませんでしたが、通常のangular <input>タグと(change)="upload($event)"タグを使用しました。

Ionic 4。

0
Tiaan Oosthuizen