Meilleure façon de changer l'image src Tout en étant asynchrone [angulaire 4]?

Question

J'ai un problème qui a été résolu par un hack et je cherche une meilleure façon de le résoudre. Ce que je veux faire est lorsque l'utilisateur clique sur input: file et sélectionne une image qu'il devrait être affiché sur l'écran sans téléchargement (en utilisant FileReader).

Le problème est, je ne peux pas atteindre presque rien à l'intérieur méthode Filereaders onload (je dois atteindre this.image pour changement d'image) malheureusement je

let el = <HTMLImageElement>document.querySelector(".veik"); 
el.src = this.result;` 

Mon code

html:

<input type="file" name="test" id="file" (change)="onChange($event)"> 

ts:

onChange($event){ 
    this.readThis($event); 
} 

ReadThis(inputValue: any) : void { 
    var file:File = inputValue.target.files[0]; 
    var myReader:FileReader = new FileReader(); 

    myReader.onload = function(e){ 
     let el = <HTMLImageElement>document.querySelector(".veik"); 
     el.src = this.result; 
    }; 

    myReader.readAsDataURL(file); 
} 

Answer 1

Peut-être que vous pouvez essayer d'utiliser un type FileItem pour accéder au fichier temporaire

Par exemple: [1]. Changez votre (InputValue: any) à une classe de FileItem générique, comme: (InputValue: FileItem),

[2] Créer une constante pour obtenir l'accès au fichier téléchargé, comme: fichier const: Fichier = item. _file

maintenant, vous pouvez accéder à des choses comme file.name, file.size etc.

espoir qui aide.

Vive