如何将PrimeNG FileUpload选择的图片动态绑定到PrimeNG Galleria组件

问题根因 #

• 数据格式不匹配：Galleria模板中绑定的是item.imagePath属性，但你往previews数组中插入的是纯base64字符串，没有封装为带imagePath字段的对象，模板无法正确读取图片地址。
• 变更检测不生效：PrimeNG Galleria的value输入默认基于引用变更触发重渲染，你通过push方法原地修改数组不会改变数组引用，因此Galleria感知不到数据更新，不会重新渲染。

修复代码 #

1. TS代码修改 #

onSelectImages(event) {
  this.selectedFiles = event.currentFiles;
  this.previews = [];
  if (this.selectedFiles && this.selectedFiles.length > 0) {
    let loadedCount = 0;
    const totalCount = this.selectedFiles.length;
    // 临时数组存储所有构造好的预览对象
    const tempPreviews = [];
    for (let i = 0; i < totalCount; i++) {
      const reader = new FileReader();
      const file = this.selectedFiles[i];
      reader.onload = (e: any) => {
        // 构造匹配模板的对象格式，同时补充caption需要的字段
        tempPreviews.push({
          imagePath: e.target.result,
          title: file.name,
          alt: `预览图${i+1}`
        });
        loadedCount++;
        // 所有文件读取完成后一次性赋值，触发数组引用变更
        if (loadedCount === totalCount) {
          this.previews = [...tempPreviews];
        }
      };
      reader.readAsDataURL(file);
    }
  }
}

2. HTML可选优化 #

如果你不需要自定义caption等字段，也可以直接修改模板的图片绑定，适配纯字符串数组：

<!-- 把原来的item.imagePath改成item即可 -->
<img [src]="item" style="width: 100%; display: block;" />

另外注意maxFileSize是输入属性，需要加方括号绑定变量：

<p-fileUpload #fubauto1 mode="basic" multiple="multiple" name="demo1[]" accept="image/*" [maxFileSize]="maxImageFileSize" (onSelect)="onSelectImages($event)" chooseLabel="Select Images"></p-fileUpload>

修改后所有图片读取完成后会一次性给previews赋值新数组，触发引用变更，Galleria会感知到数据更新，同时数据格式匹配模板绑定的字段，即可正常渲染预览图。

内容的提问来源于stack exchange，提问作者Pavan Deshmukh