web-dev-qa-db-fra.com

Prévisualiser plusieurs images avant de télécharger le fichier dans Angular

Comment prévisualiser plusieurs images que j'ai sélectionnées avant de les télécharger dans Angular?

 enter image description here

J'ai réussi à le faire, mais avec une seule image, bien que j'en sélectionne plusieurs, une seule me reconnaît. Je pense que l’utilisation de *ngFor est une bonne alternative mais je ne sais pas comment l’élever. Des idées?

myComponent.html

<img *ngIf="url" [src]="url" class="rounded mb-3" width="180">
<input type="file" multiple (change)="detectFiles($event)">

myComponent.ts

detectFiles(event) {
this.selectedFiles = event.target.files;
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]);
}
}
htmlangulartypescript
2
Paco Zevallos

Comme indiqué dans this stackblitz , vous pouvez stocker les URL d'image dans un tableau et les afficher avec ngFor:

<div>
    <img *ngFor="let url of urls" [src]="url" class="rounded mb-3" width="180">
</div>
<input type="file" multiple (change)="detectFiles($event)">

Le tableau d'URL est rempli dans detectFiles:

export class AppComponent {

  urls = new Array<string>();

  detectFiles(event) {
    this.urls = [];
    let files = event.target.files;
    if (files) {
      for (let file of files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.Push(e.target.result);
        }
        reader.readAsDataURL(file);
      }
    }
  }
}
14
ConnorsFan

nous pouvons utiliser * ngFor comme suit:

<div *ngFor="let img of arrayOfImg; let i = index">
      <img [src]="img" class="rounded mb-3" width="180">
</div>

J'ai ajouté l'index parce que c'est utile d'avoir parfois, si le tableau n'est pas simplement un tableau de chaînes, à la place d'un tableau json ou objet, vous devrez peut-être faire ceci:

[src] = "img.url"

Je ne sais pas comment télécharger/sélectionner les fichiers à télécharger, mais je suppose que lorsque vous les sélectionnez à partir de l'ordinateur et/ou de l'URL, vous ajoutez simplement leur URL à un tableau.

0
Cacoon