PrimeNG p-fileUpload的onRemove事件中如何获取剩余文件列表？

有两种可靠方式可以实现你的需求：

方法1：通过ViewChild获取组件实例读取剩余文件 #

借助Angular的ViewChild获取p-fileUpload组件实例，在onRemove触发时直接访问实例的files属性，就能拿到当前剩余的所有文件。

HTML代码 #

<p-fileUpload #fileUpload 
    (onSelect)="onFilesSelectedToUpload($event.currentFiles)"
    (onRemove)="onFileRemoved($event.file)"
    [multiple]="true">
</p-fileUpload>

TypeScript代码 #

import { Component, ViewChild } from '@angular/core';
import { FileUpload } from 'primeng/fileupload';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  @ViewChild('fileUpload') fileUpload!: FileUpload;

  onFilesSelectedToUpload(files: any[]) {
    files.forEach(file => {
      // 处理新增文件的业务逻辑
    });
  }

  onFileRemoved(deletedFile: any) {
    // 获取当前剩余的文件列表
    const remainingFiles = this.fileUpload.files;
    // 基于剩余文件执行你的逻辑
    remainingFiles?.forEach(file => {
      // 你的业务代码
    });
  }
}

方法2：自行维护本地文件数组 #

在组件内维护一份独立的文件列表，onSelect时合并新增文件，onRemove时过滤掉被删除的文件，让本地数组始终保持最新状态。

TypeScript代码 #

export class YourComponent {
  // 本地维护的待上传文件列表
  uploadedFiles: any[] = [];

  onFilesSelectedToUpload(files: any[]) {
    // 合并新增文件到本地数组
    this.uploadedFiles = [...this.uploadedFiles, ...files];
    // 处理新增文件的业务逻辑
    files.forEach(file => {
      // 你的业务代码
    });
  }

  onFileRemoved(deletedFile: any) {
    // 过滤掉被删除的文件，更新本地数组
    this.uploadedFiles = this.uploadedFiles.filter(file => file !== deletedFile);
    // 此时this.uploadedFiles就是剩余文件列表，直接使用即可
    this.uploadedFiles.forEach(file => {
      // 你的业务代码
    });
  }
}

两种方法各有适用场景：

• 方法1更简洁，无需额外维护状态，适合依赖组件内部状态的场景；
• 方法2更灵活，完全掌控文件列表的生命周期，适合需要对文件列表做复杂自定义操作的场景。

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