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アプリケーションをビルドしていないので、この問題の解決にご協力ください。
_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];
//...
}
_
HTMLInputElementとしてキャストできます:
document.getElementById("customimage").onchange= function(e: Event) {
let file = (<HTMLInputElement>e.target).files[0];
//rest of your code...
}
これはより多くの行ですが、私はそれが最も明確だと思います。
const onChange = (event: Event) => {
const target= event.target as HTMLInputElement;
const file: File = (target.files as FileList)[0];
/** do something with the file **/
};
最も簡単な解決策は、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
型を宣言することです。
私はそれを見つけました:
<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。