在Angular中上传文件之前预览多个图像答案

【问题标题】：Preview multiple image before upload file in Angular在Angular中上传文件之前预览多个图像
【发布时间】：2018-11-21 13:36:20
【问题描述】：

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

【问题讨论】：

标签： html angular typescript

【解决方案1】：

如this 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)">

网址数组填入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);
      }
    }
  }
}

【讨论】：

这可行，但使用高分辨率图像挂起 dom 并且图像数量很高可能是由于大量的 base64 数据。 @ConnorsFan 你能为此提出任何解决方案吗？

【解决方案2】：

我们可以像这样使用 *ngFor：

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

我添加了索引，因为它有时很有用，如果数组不仅仅是一个字符串数组，而是一个 json 或对象数组，您可能必须这样做：

[src]="img.url"

我不确定如何上传/选择要上传的文件，但我会假设当您从计算机和/或 URL 中选择它们时，您只需将它们的 URL 添加到数组中

【讨论】：

这行不通，因为文件事件没有给你任何 url