web-dev-qa-db-fra.com

Comment prévisualiser une image stockée dans le faux chemin dans Angular 2 / Typescript?

Les navigateurs ne prennent pas le chemin complet du disque local, ils concaténent le nom du fichier avec fakepath. Est-il possible d’accéder au fichier (image) à partir de fakepath à l’aide de TypeScript ou angular 2?

J'ai ceci:

<img src="{{path}}" />

où ma variable chemin stocke le 'fakepath': "C:\fakepath\pic.jpg" dans mon fichier .ts.

Éditer Cette question explique comment prévisualiser un fichier image à partir de fakepath à l'aide de javascript. Si c'est possible avec Js, n'est-ce pas pareil en cas de ts?

angulartypescriptimage-uploading
36
Karan Desai

Cela devrait faire ce que vous voulez:

<input type='file' (change)="readUrl($event)">
<img [src]="url">

readUrl(event:any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (event: ProgressEvent) => {
      this.url = (<FileReader>event.target).result;
    }

    reader.readAsDataURL(event.target.files[0]);
  }
}
91
Günter Zöchbauer

En ajoutant à la réponse de @ GünterZöchbauer, cela ne fonctionnait pas pour moi tant que je n’ai pas ajouté ceci:

reader.onload = function(e:any){
   this.url = e.target.result;
}

Avant d’ajouter "any", j’obtenais l’erreur:

property 'result' does not exist on type 'eventtarget'
10
user875139

Cela fonctionne lorsque vous modifiez l'événement en un type. De cette façon, Angular peut accéder à n’importe laquelle de ses propriétés.

readUrl(event) {
if (event.target.files && event.target.files[0]) {
  var reader = new FileReader();

  reader.onload = (event:any) => {
    this.url = event.target.result;
  }

  reader.readAsDataURL(event.target.files[0]);
}

}

4
Ifesinachi Bryan

Ça marche

example.component.html

<input type="file" (change)="onFileChanged($event)" required />
<img [src]="imageShow" height="200"> <br/>

example.component.ts

imageShow: any= '';
onFileChanged(event) {
  this.file = event.target.files[0]
  var reader = new FileReader();
  reader.readAsDataURL(event.target.files[0]);
  reader.onload = (event) => {
   this.imageShow = (<FileReader>event.target).result;
 }

}

2
Sunil Manipara