为什么我的 PrimeNG FileUpload 组件出现此问题，该问题与引用不存在的页面的 url 参数相关

问题描述

我正在使用 PrimeNG 开发一个 Angular 应用程序，我发现 PrimeNG FileUpload 组件存在一些问题，这个：https://primefaces.org/primeng/showcase/#/fileupload

我正在关注这个组件的官方文档和源代码示例，但我遇到了以下问题。

在我的 Angular 组件 HTML 代码中，我放置了示例提供的相同代码，如下所示：

<div class="card">
  <h5>Advanced</h5>
  <p-fileUpload name="demo[]" url="./upload.PHP" (onUpload)="onUpload($event)"
                multiple="multiple" accept="image/*" maxFileSize="1000000">
          <ng-template pTemplate="content">
              <ul *ngIf="uploadedFiles.length">
                  <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
              </ul>
          </ng-template>
  </p-fileUpload>
</div>

在这里我注意到了第一个“奇怪”的事情。此组件在组件定义中声明 url="./upload.PHP" 参数。我觉得这很奇怪，因为这是一个 Angular 应用程序，我必须在我的 Angular 应用程序中处理所有内容。

进入这个组件官方文档，我可以阅读：

FileUpload 需要一个 url 属性作为上传目标和一个名称 在后端识别文件。

具体是什么意思？为什么？我与 PHP 应用程序没有任何关系。这一切都必须由我的 Angular 组件来处理。

回到代码示例，然后我将此数组放入我的 TypeScript 代码中以包含上传的文件：

uploadedFiles: any[] = [];

以及以下处理实际文件上传功能的方法（我认为当用户单击“更新”按钮时会触发该功能）：

onUpload(event) {
    console.log("onUpload() START");
    for(let file of event.files) {
        console.log("FILE TO BE UPLOADED: ",file);
        this.uploadedFiles.push(file);
    }

    this.messageService.add({severity: 'info',summary: 'File Uploaded',detail: ''});
}

现在运行我的应用程序，我可以选择要上传的文件：

现在的问题是点击更新按钮会发生一些奇怪的事情（正如我所料，由于存在url="./upload.PHP"参数在此上传组件的 HTML 定义中）。

单击“更新”按钮，我的 TypeScript 代码中定义的 onUpload(event) 未执行，并且我在 Chrome 控制台中收到以下错误：

zone-evergreen.js:2845 POST http://localhost:4200/upload.PHP 404 (Not Found)

似乎 PrimeNG FileUpload 组件正试图对由 url 参数指定的 URL 执行 HTTP POST 调用，该 URL 不存在于我的应用程序中（并且不必存在）。

为什么？我错过了什么？我该如何处理这种情况，以便整个操作都由我的 TypeScript 组件代码处理？ （这个想法是当点击上传按钮时 onUpload() 方法被调用，然后文件将使用我的自定义代码保存在 Firebase 存储中）。我该如何解决？

解决方法

我认为我自己使用文档中所示的“自定义上传”解决了这个问题：

1. 在我的组件的 HTML 代码中：

   高级

    <p-fileUpload name="myfile[]" customUpload="true" (uploadHandler)="myUploader($event)">
   
                multiple="multiple" accept="image/*" maxFileSize="1000000">
          <ng-template pTemplate="content">
              <ul *ngIf="uploadedFiles.length">
                  <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
              </ul>
          </ng-template>
    </p-fileUpload>
   

2. 在我的 TypeScript 代码中：

    myUploader(event) {
      console.log("onUpload() START");
      for(let file of event.files) {
        console.log("FILE TO BE UPLOADED: ",file);
        this.uploadedFiles.push(file);
      }
      this.messageService.add({severity: 'info',summary: 'File Uploaded',detail: ''});
    }