PrimeNg FileUpload组件无法为不支持格式文件显示对应提示

问题场景 #

使用PrimeNG FileUpload组件，配置accept=".pdf"仅允许上传PDF文件。拖拽上传3个文件（FileA.doc、FileB.pdf、FileC.doc）时，仅FileA显示失败提示、FileB显示上传状态，FileC无任何反馈，用户无法确认该文件是否上传失败。现有onUpload/onError事件仅能捕获合规PDF文件的信息，无法获取不合规文件的状态。

解决方案 #

核心思路是利用onSelect事件捕获所有选中的文件，手动校验每个文件的格式，对不合规文件单独生成提示信息。

1. 修改HTML模板，添加onSelect事件绑定 #

<div class="card">
    <p-card header="Upload Report here">
        <p-fileUpload name="myfile[]" 
        [customUpload]="true" 
        [multiple]="multiple" 
        [auto]="true"
        (onUpload)="onUpload($event)" 
        (onError)="onError($event)" 
        (onRemove)="onRemove($event)"
        (uploadHandler)="handleUpload($event)"
        (onSelect)="onFileSelect($event)"
        accept=".pdf">
        </p-fileUpload>
    </p-card>
</div>

2. 实现文件选择后的校验逻辑 #

在组件类中添加onFileSelect方法，遍历所有选中文件并校验格式，同时调整原有事件方法避免覆盖提示：

onFileSelect(event) {
  // 遍历所有选中的文件，包括不符合格式的文件
  for (const file of event.files) {
    // 双重校验：后缀名+MIME类型，提升可靠性
    const isPdf = file.name.toLowerCase().endsWith('.pdf') || file.type === 'application/pdf';
    if (!isPdf) {
      // 为不合规文件添加错误提示
      this.msgs.push({
        severity: 'error',
        summary: '格式不支持',
        detail: `文件 "${file.name}" 不是PDF格式，无法上传`
      });
    }
  }
}

onUpload(event) {
  for (let file of event.files) {
    this.uploadedFiles.push(file);
    // 使用push而非直接赋值，避免覆盖之前的提示
    this.msgs.push({
      severity:'success',
      summary:'上传成功',
      detail:`文件 "${file.name}" 已成功上传`
    });
  }
}

onError(event) {
  for (let file of event.files) {
    this.msgs.push({
      severity:'error',
      summary:'上传失败',
      detail:`文件 "${file.name}" 上传失败`
    });
  }
}

onRemove(event) {
  this.msgs.push({
    severity:'info',
    summary:'文件已移除',
    detail:`文件 "${event.file.name}" 已被移除`
  });
}

原理说明 #

PrimeNG FileUpload的accept属性仅起到前端过滤作用，不符合格式的文件会被组件自动排除在上传流程外，因此不会触发onUpload或onError事件。而onSelect事件会在文件被选中（拖拽/手动选择）时立即触发，返回所有选中的文件，这让我们可以手动介入校验流程，为每个不合规文件生成明确的反馈。

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