Question

我将尝试解释这个组件的用途，我已经用这种方式定义了组件

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

在我的包Json上我有这个＆＃34; primeng＆＃34;：＆＃34; ^ 4.1.0-rc.3＆＃34; 并在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]

请将该模板变量传递给component，然后使用该变量进行清除。

例如：

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);
});

p-fileUpload不能多次使用primeng

3 个答案: