为啥我的 PrimeNG FileUpload 组件存在这个问题，该组件与引用不存在的页面的 url 参数相关

Posted 2023-02-22

【中文标题】为啥我的 PrimeNG FileUpload 组件存在这个问题，该组件与引用不存在的页面的 url 参数相关

【英文标题】：Why I have this problem with PrimeNG FileUpload component related to the url parameter that referer to a page that doesn't exist为什么我的 PrimeNG FileUpload 组件存在这个问题，该组件与引用不存在的页面的 url 参数相关

【发布时间】：2021-04-09 15:45:22

【问题描述】：

我正在使用 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: '');

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

现在的问题是单击 Update 按钮会发生一些奇怪的事情（正如我所料，由于存在 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 调用，该参数在我的应用程序中不存在（并且该参数必须不存在）。

为什么？我错过了什么？我该如何处理这种情况，以便整个操作由我的 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>

在我的 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: '');