如何在p-fileUpload中实现已上传文件的预加载展示？

PrimeNG的p-fileUpload组件本身支持通过[files]输入属性绑定已选文件数组实现预加载，你只需确保存储的文件格式正确，并在组件初始化时赋值给绑定变量即可，具体操作如下：

1. 确认文件存储格式 #

• 若你是通过onSelect事件直接保存的用户上传文件（原生File对象），可直接复用这些对象，无需额外转换。
• 若仅从后端获取到文件元数据（如文件名、大小、类型），需要构造符合要求的File对象，示例：

  // 构造用于展示的模拟File对象，第一个参数为空数组（无需本地读取文件内容）
  const preloadedFile = new File([], '用户已上传文档.pdf', {
    type: 'application/pdf',
    lastModified: Date.now()
  });
  

2. 组件类中赋值 #

在组件初始化阶段（比如ngOnInit钩子），将存储的文件赋值给绑定的uploadMoodelFiles变量：

import { Component, OnInit } from '@angular/core';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  uploadMoodelFiles: File[] = [];
  // storedFiles为你存储的用户之前上传的文件数组
  private storedFiles: File[] = [];

  ngOnInit(): void {
    // 初始化时将存储的文件赋值给组件绑定变量
    this.uploadMoodelFiles = [...this.storedFiles];
    // 若为后端获取的元数据，用构造的File对象赋值
    // this.uploadMoodelFiles = [preloadedFile];
  }

  // 你的其他业务方法：onSelect、onError、onClear等
}

3. 模板绑定验证 #

你当前的模板已经正确绑定了[files]="uploadMoodelFiles"，只要uploadMoodelFiles数组有值，组件就会自动渲染预加载的文件。额外注意：

• 响应式更新：如果文件是异步获取的（比如后端接口请求），赋值后Angular会自动触发变更检测；若遇到组件不更新的情况，可手动调用ChangeDetectorRef.detectChanges()。
• 自定义上传逻辑：预加载的文件会和新选择的文件一起被组件管理，若需要用户重新上传时替换原有文件，可在onSelect事件中先清空数组再添加新文件。

内容的提问来源于stack exchange，提问作者KHANISHKHA SAKTHIVEL