p-fileUpload 不能多次啟動

Question

我將嘗試解釋這個組件發生了什么，我已經這樣定義了組件

<p-fileUpload #fileUpload accept=".csv,.txt" maxFileSize="1000000" customUpload="true" (uploadHandler)="uploadFile($event)">

在我的包 Json 上，我有這個“primeng”：“^4.1.0-rc.3”，並且在 js 文件中有這個方法

 uploadFile(event) {

    for (let file of event.files) {
        this.uploadedFiles.push(file);
    }

    this.uploadFileService.doSomething(this.uploadedFiles[0]).subscribe(x => {
        this.fileInfo = x;
        ..do some stuff..

    });
}

它第一次按預期工作（顯示組件選擇、上傳和取消的 3 個按鈕）並讓我從彈出窗口中選擇文件，然后該過程繼續調用 uploadFile 方法； 問題是，一旦它完成，如果我嘗試再次上傳同一個文件，它不允許我這樣做。 它只允許我選擇文件，但從不啟用上傳按鈕，當然，從不調用 uploadFile 方法。 但是如果我選擇另一個不同於以前的文件，它會按預期工作，這意味着調用 uploadFile 方法。

我正在使用

this.fileUpload.clear();

只是為了清除向用戶顯示上傳文件的部分

有什么建議嗎？

Answer 1

我想這個問題可能已經解決了，但為了供開發人員將來參考，請在下面找到解決方案。

解決方法和解釋請參考：[ https://github.com/primefaces/primeng/issues/4018][1]

請將模板變量傳遞給組件，然后使用該變量清除。

例如：

HTML文件：

<p-fileUpload #fileUpload accept=".csv,.txt" maxFileSize="1000000" customUpload="true" (uploadHandler)="uploadFile($event,fileUpload)">

組件文件：

uploadFile(event,fileUpload) {

    for (let file of event.files) {
        this.uploadedFiles.push(file);
    }

    this.uploadFileService.doSomething(this.uploadedFiles[0]).subscribe(x => {
        this.fileInfo = x;
        ..do some stuff..

    });

    fileUpload.clear(); // this will clear your file
}

Answer 2

這有效。

Html :(參考即 #fileUpload )

<p-fileUpload #fileUpload mode="basic" name="upload[]" maxFileSize="1000000" (onSelect)="onFileChange($event)" chooseLabel="Upload" auto="auto"></p-fileUpload>

TS：（使用參考進行操作）：

 @ViewChild('fileUpload') fileUpload: any;

在需要清除 fileUpload 時調用 clear 方法並執行以下操作：

clear(){
      this.fileUpload.clear();
    }

和 onFileChange($event) 將像往常一樣工作，如下所示：

 onFileChange(event) {
        for(let file of event.files) {
            this.customUploadedFiles.push(file);
      }
  } 

Answer 3

我看到使用“this.fileUpload.clear()”的問題。 用下面的代碼替換“this.fileUpload.clear()”。

this.fileUpload.files.forEach((value, index) => {
 this.fileUpload.files.splice(index, 1);
});