在Angular中上传文件之前预览多个图像 [英] Preview multiple image before upload file in Angular

问题描述

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

尽管我选择了几个，但只有一个图像能够识别，但我已设法完成该操作。我认为使用 * ngFor 是一个很好的选择，但我不知道如何提高它。任何想法？

myComponent.html

 < img * ngIf =url[src] =urlclass =rounded mb-3width =180> 
< input type =filemultiple（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]）; 
 
 
  

解决方案

如 此堆叠式闪电般 所示，您可以将图片网址存储在数组并使用 ngFor 显示它们：

 < div> 
< img * ngFor =让url的url[src] =urlclass =rounded mb-3width =180> 
< / div> 
< input type =filemultiple（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）; 
} 
} 
} 
} 
  

How can I preview multiple images that I have selected before uploading them in Angular?

I have managed to do it but only with one image, even though I select several, only one recognizes me. I think the use of *ngFor is a good alternative but I'm not sure how to raise it. Any ideas?

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

解决方案

As shown in this stackblitz, you can store the image URLs in an array and display them with ngFor:

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

The array of URLs is filled in 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);
      }
    }
  }
}

这篇关于在Angular中上传文件之前预览多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！