如何限制PrimeNg FileUpload组件的最大上传文件数量？

问题原因 #

你开启了customUpload="true"，这会让PrimeNg FileUpload组件放弃内置的文件验证逻辑（包括文件数量限制），转而完全由你自定义的上传流程接管，因此fileLimit属性不会自动生效。

解决方案 #

需要在onSelect事件中手动实现文件数量的校验逻辑，具体步骤如下：

1. 在组件的TypeScript代码中修改onSelect方法，添加文件数量检查：

import { MessageService } from 'primeng/api';

// 注入MessageService用于提示错误
constructor(private messageService: MessageService) {}

onSelect(fileUploader: any) {
  const maxFileCount = 4; // 和你设置的fileLimit保持一致
  const currentFileCount = fileUploader.files.length;

  if (currentFileCount > maxFileCount) {
    // 移除超出数量的文件
    fileUploader.files.splice(maxFileCount);
    // 显示错误提示
    this.messageService.add({
      severity: 'error',
      summary: '上传失败',
      detail: `最多只能上传${maxFileCount}个PDF文件`
    });
  }
}

2. 确保你的组件模块已经导入了MessageModule，否则错误提示无法正常显示：

import { MessageModule } from 'primeng/message';
import { MessagesModule } from 'primeng/messages';

@NgModule({
  imports: [
    // ...其他模块
    MessageModule,
    MessagesModule
  ]
})
export class YourModule {}

3. （可选）优化模板中的fileLimit绑定方式，改用属性绑定更符合Angular规范：

<p-fileUpload 
  ...
  [fileLimit]="4"
  ...
></p-fileUpload>

这样就能在用户选择文件时立即校验数量，超出限制时自动移除多余文件并给出提示，实现你需要的文件数量限制功能。

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