web-dev-qa-db-ja.com

Angularでファイルをアップロードする前に複数の画像をプレビュー

Angularにアップロードする前に、選択した複数の画像をプレビューするにはどうすればよいですか？

enter image description here

何とかできましたが、1つの画像だけで、複数を選択しても、1つだけが認識されます。 *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]);
}
}
htmlangulartypescript
7
Paco Zevallos

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

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);
      }
    }
  }
}
23
ConnorsFan

* 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を配列に追加すると仮定します

0
Cacoon