Primeng的p-fileUpload中沒有運行onUpload方法

Question

我在 html 中聲明 FileUpload 如下

<p-fileUpload  name="file"  url="http://localhost:8080/integra/services/upload" (onUpload)="onUpload($event)"  accept=".txt"></p-fileUpload>

這是指向我的后端

    @PostMapping(value="/upload", produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public ResponseEntity uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
        File convertFile = new File("C:\\upload\\"+file.getOriginalFilename());
        convertFile.createNewFile();
        FileOutputStream fout = new FileOutputStream(convertFile);
        fout.write(file.getBytes());
        fout.close();
        return new ResponseEntity("OK", HttpStatus.OK);
    }

但是，當在我的 typescript 中執行我的 onload 事件時，它不起作用……甚至還放置了一個 console.log 進行測試，但它不起作用。 這是我的 typescript

  onUpload(event) {
    console.log(event.files.length);
    console.log(event.progress);
  }

當我運行文件上傳時，加載欄卡住了，不允許我執行另一個文件上傳。 因此，當加載欄從未完成時，不會執行提到的事件在此處輸入圖像描述

最后，文件保存在上述路徑中，但我無法正確處理事件

我會很感激有人可以幫助我。 謝謝

Answer 1

我在使用“onUpload”方法時遇到了同樣的問題（對我不起作用），您可以使用uploadHandler和customUpload="true"代替，它就像一個魅力！

Here is some sample code:

```
in my HTML file :
<p-fileUpload #fileInput
  name="files" 
  (uploadHandler)="onUpload($event)"
  customUpload="true"
></p-fileUpload>
```
in my TS file:
  onUpload(event) {
    console.log('onUpload', event); 
  }