Porównaj ceny domen i usług IT, sprzedawców z całego świata

Podgląd wielu obrazów przed przesłaniem pliku w Angular


Jak mogę wyświetlić podgląd wielu wybranych obrazów przed załadowaniem ich w Angular?
https://i.stack.imgur.com/znjbS.png
Udało mi się to zrobić, ale przy tylko jednym obrazie, chociaż wybieram kilka, tylko jeden mnie rozpoznaje. Myślę, że używanie
* ngFor
jest dobrą alternatywą, ale nie jestem pewien, jak to zrobić. Jakieś pomysły?

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.resu<
}
reader.readAsDataURL(event.target.files[0]);
}
}

Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jak pokazano w
ten stackblitz
https://stackblitz.com/edit/angular-4jmjzh
, możesz przechowywać adresy URL obrazów w tablicy i wyświetlać je za pomocą
ngFor
:
<div>
<img *ngFor="let url of urls" [src]="url" class="rounded mb-3" width="180"><input type="file" multiple (change)="detectFiles($event)">

Tablica adresów URL jest umieszczana w
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);
}
}
}
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

możemy użyć * ng Do tego:
<div *ngFor="let img of arrayOfImg; let i = index">
<img [src]="img" class="rounded mb-3" width="180">

Dodałem indeks, ponieważ czasami warto go mieć, jeśli tablica nie jest tylko tablicą ciągów, ale tablicą json lub obiektową, być może będziesz musiał to zrobić:
[źródło] = „img.url”
Nie jestem pewien, jak wgrać/wybrać pliki do przesłania, ale sugerowałbym, aby po wybraniu ich z komputera i/lub adresu URL po prostu dodać ich adres URL do tablicy

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się