无法使用 PrimeNg FileUpload 组件显示不支持的文件格式的不同消息

Question

我正在使用 PrimeNg 的 FileUpload 组件，并且我只接受 PDF 格式上传。所以我有一个场景，例如我有 3 个文件 FileA.doc、FileB.pdf、FileC.doc。所以我有 3 个文件，其中只有一个格式可接受。当我拖放上传时，我只收到一个文件的通知，即可以看到 FileA 和 FileB 进行上传，但我没有看到 FileB 的任何内容，从最终用户的角度来看，这可能有点令人困惑是否已上传或者上传失败。

我尝试过的是，我尝试查看上传事件，但无法从这里提取任何内容，我可以在其中显示每个文件的消息甚至控制台日志及其上传状态或有关其接受的状态上传标准。 下面是我的代码：

HTML

<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)"
        accept=".pdf">
        </p-fileUpload>
    </p-card>
</div>

组件.ts

  onUpload(event) {
    for (let file of event.files) {
      this.uploadedFiles.push(file);
      this.msgs = [{severity:'success', summary:'Successfully uploaded', detail:`Files uploaded are : ${file.name}`}]
    }
  }

  handleUpload(event) {
    console.log(event);
    
  }

  onError(event) {
    for (let file of event.files) {
      this.msgs = [{severity:'error', summary:'Upload Failed ', detail:`Name of the file : "${file.name}"`}]
    }
  }

  onRemove(event) {
    this.msgs = [{severity:'info', summary:'File Removed ', detail:`Name of the file : "${event.file.name}"`}]
  }

以下是我为事件调试时得到的信息。

但是我仅获得可接受的文件格式（即 PDF）的此信息，而我看不到其他两个文件，即 FileA 和 FileB，它们是事件日志中不受支持的文件。

Answer 1

如果您在 html 中提供 Accept=".pdf" 并尝试上传其他文件类型，则不会触发“onUpload”事件。因此，如果您想向用户显示不支持消息文件类型，请从 html 中删除 Accept=".pdf"。相反，请在 .ts 文件“onUpload”事件上检查此条件。

onUpload(event) {
for (let file of event.files) {
  const acceptedFormats = ['image/png', 'image/jpeg', 'image/jpg', 
'application/pdf'];

  if (file && !acceptedFormats.includes(file.type)) {
    alert('Invalid file format. Please upload a valid file.');
    return;
  }
    this.uploadedFiles.push(file);
    this.msgs = [{severity:'success', summary:'Successfully uploaded', detail:`Files uploaded are : ${file.name}`}]
}

}