如何使用 angular2 在 p-fileUpload 中成功消息后清除上传的文件

Question

我正在使用 primeng 的 p-fileUpload 插件，上传文件后，我仍然可以在成功消息后看到我上传的文件。任何人都可以帮助我如何在成功消息后隐藏这些文件。

HTML：

<p-fileUpload #form name="photo" type="file" customUpload="true" (uploadHandler)="fileChangeEvent($event, form)" multiple="multiple"></p-fileUpload>

TS：

  fileChangeEvent(fileInput: any, form) {
    if (
      fileInput.files.some(f => this._validFileExtensions.indexOf(f.type) != -1)
    ) {
      this.showError("Invalid file Added");
    } else {
      this.upload(fileInput.files, form);
    }
  }

调用此功能时我需要清除文件，

if (this.progressStatus === 'done') {
  this.progressValue = 100;
  this.progress = false;
  clearInterval(interval);
  return ;
}

Answer 1

我对 p-fileUpload 组件也有同样的问题。这就是我在使用 uploadHandler 上传后设法删除文件的方法。在 html 上我添加了 [files]="myfiles"

 <p-fileUpload [files]="myfiles" customUpload="true (uploadHandler)="myUploader($event)" maxFileSize="6000000">

然后在 ts 中

      myfiles: any = [];
      myUploader(event) {
        if (this.myfiles != undefined && this.myfiles.length > 0) {

          this.myfiles.forEach(element => {
            var re = /(?:\.([^.]+))?$/;
            let file = element;
            var that = this;
            var newFile = {
              FilePath: "",
              FileName: element['name'],
              Extension: re.exec(element['name'])[1]
            };
            this.getBase64(file).then(
              data => {
                newFile['MIME'] = file.type;
                newFile['FileSize'] = file.size;
                newFile['FileContent'] = (<string>data).split(',')[1].replace(String.fromCharCode(92), String.fromCharCode(92, 92));
                that.saveFile(newFile);
              }

            );
          });

          this.myfiles = [];
        }
      }

 getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }

希望能帮助到你