Propriété "fichiers" n'existe pas sur le type "EventTarget" erreur dans le fichier d'enregistrement

Je suis en train d'essayer d'accéder à la valeur de l'entrée de fichier à partir de mon ionique 2 demande encore, mais je suis confronté à la question de la propriété des fichiers n'existe pas sur le type "EventTarget'.
Comme il fonctionne correctement en js, mais pas en caractères d'imprimerie.
Le code est donné ci-dessous:

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

Merci de m'aider à résoudre ce problème car il n'est pas de la création de mon ionique 2 de la demande.

InformationsquelleAutor Chirag Chaudhari | 2017-04-03
  1. 28

    La e.target type de propriété dépend de l'élément que vous êtes de retour sur getElementById(...). files est une propriété de input élément: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

    Dans ce cas, le Tapuscrit compilateur ne sait pas que vous êtes de retour d'une input élément et nous n'avons pas un Event classe spécifique pour cela. Ainsi, vous pouvez créer un, comme le code suivant:

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

document.getElementById("customimage").onchange = function(e?: HTMLInputEvent) {
    let files: any = e.target.files[0]; 
    //...
}
    • Comme quelqu'un l'a suggéré ci-dessous, vous pouvez simplement utiliser: "e: tout". Je me demandais quels sont les avantages de l'utilisation de l'approche proposée ici?
    • il est plus probable car il n'y a pas de pros de perdre le type de fichier d'enregistrement. Chaque fois que vous êtes à l'aide de "tout", vous supprimez les types de gardes.
    • Tout à fait exact. En un mot, si vous utilisez "tout" ici, vous peut aussi bien ne pas utiliser la Machine à tous. C'est un peu hyperbolique -- j'ai été connus pour utiliser "tout" quand je ne suis pas dans l'humeur pour définir un type juste pour une seule fonction du paramètre -- mais la logique est cohérente; la seule raison d'utiliser la Machine à tout, c'est pour permettre au compilateur de vous aider en vous empêcher de faire en fonction de leur type d'erreurs.
    InformationsquelleAutor Diullei
  2. 36

    Vous pouvez le jeter comme un HTMLInputElement:

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

    La solution la plus simple est de déclarer e comme any

    e.g

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

    Mais vous perdez des informations de type. Une approche plus sûre peut-être à déclarer votre propre FileEvent type de https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload.

    • Pas vraiment d'accord avec cette réponse, à mon avis, nous avons besoin toujours de déclarer un type pour plus de clarté & compréhension
    InformationsquelleAutor shusson
  4. 7

    C'est plus de lignes, mais je pense que c'est la plus claire.

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

    J'ai trouvé que:

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

    et

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

    ne gère pas l'événement de la même façon. Donc event.target se compose de différents paramètres.

    J'ai donc fait de ne pas utiliser le ion-input tag, mais la normale angulaire <input> étiquette avec le (change)="upload($event)" déclencheur.

    Il a travaillé pour moi Ioniques 4.

    InformationsquelleAutor Tiaan Oosthuizen