在Angular中上传文件前预览多张图片

Question

在Angular中上传文件前预览多张图片

9

我在 Angular 中如何预览我选择上传的多个图片？

我已经成功地实现了单张图片的预览，但是当我选择多张图片时，只有一张被识别。我认为使用 *ngFor 是一个不错的替代方案，但我不确定如何实现。有什么想法吗？

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

- Paco Zevallos

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ConnorsFan · Accepted Answer

如此Stackblitz所示，您可以将图像URL存储在数组中，并使用ngFor进行显示：

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

URL数组在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);
      }
    }
  }
}