如何在PrimeNg gallery中渲染通过PrimeNg File-Upload浏览的新图像 &

Question

我试图将通过primeNg file-upload浏览的图像文件数组绑定到primeNg gallaria。

下面是html代码-

<p-fileUpload #fubauto1 mode="basic" multiple="multiple" name="demo1[]" accept="image/*" maxFileSize="maxImageFileSize" 
(onSelect)="onSelectImages($event)" chooseLabel="Select Images"></p-fileUpload>
<p-galleria [(value)]="previews" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '640px'}"
[numVisible]="3"> 
<ng-template pTemplate="item" let-item>
<img [src]="item.imagePath" style="width: 100%; display: block;" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
<div class="p-grid p-nogutter p-justify-center">
<img [src]="item.imagePath" style="display: block;width: 50%" />
</div>
</ng-template>
<ng-template pTemplate="caption" let-item>
<h4 style="margin-bottom: .5rem; color: #ffffff;">{{item?.title}}</h4>
<p>{{item.alt}}</p>
</ng-template>
</p-galleria>

angular的代码如下-

onSelectImages(event) {
this.selectedFiles = event.currentFiles;
this.previews = [];
if (this.selectedFiles && this.selectedFiles[0]) {
const numberOfFiles = this.selectedFiles.length;
for (let i = 0; i < numberOfFiles; i++) {
const reader = new FileReader();
reader.onload = (e: any) => {
this.previews.push(e.target.result);
};
reader.readAsDataURL(this.selectedFiles[i]);
}
}
}

我试图在简单的图像html元素中显示图像，它正在工作，但当附加到gallaria时它不工作。

也检查gallaria的工作，是的，它在gallaria初始化之前输入时工作，但是当gallaria初始化完成并且我们绑定浏览的图像数组时，它不工作。

有人能帮我解决我面临的上述问题吗?

Answer 1

希望下面的回答帮助某人。上传图片后，不要直接推送图片，图片不会更新。创建另一个名为imagestemp的变量，推入图像并将其复制到主变量(this.previews)中，其中图像绑定到画廊。

代码:

imagestemp: any[] = [];
onSelectImages(event) {
this.selectedFiles = event.currentFiles;
this.previews = [];
if (this.selectedFiles && this.selectedFiles[0]) {
const numberOfFiles = this.selectedFiles.length;
for (let i = 0; i < numberOfFiles; i++) {
const reader = new FileReader();
reader.onload = (e: any) => {
this.imagestemp.push(e.target.result);
};
this.previews=[...imagestemp]
reader.readAsDataURL(this.selectedFiles[i]);
}
}
}