[英]Preview multiple image before upload file in Angular
如何在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]);
}
}
如此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);
}
}
}
}
我们可以这样使用* 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添加到数组中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.