使用 PrimeNG 文件上传组件模拟上传?

问题描述

我正在尝试在我制作的原型中使用 PrimeNG 文件上传组件.

查看他们的代码，他们正在使用一个文件 upload.，这是一个仅包含

的虚拟文件

';?>

所以，我添加了 upload.

看看 TS，它看起来像所有的东西:

onUpload(event) {for(event.files 的常量文件){this.uploadedFiles.push(file);}this.msgs = [];this.msgs.push({severity: 'info', summary: 'File Uploaded', detail: '' });}

我错过了什么吗?我只是想获得他们必须在我的原型中运行的演示，以模拟上传的 UI.

解决方案

对于这个实现 (onProgress)=progressReport($event)"在 p 文件上传为

然后在 ts 文件中，您可以使用通过@ViewChild 访问 p-upload，然后在您接收上传百分比更新的代码中，使用

 this.fileuploader.onProgress.emit(this.value);

在自定义的 onProgress 处理程序上，我们可以实现为

progressReport($event: any) {this.fileuploader.progress = $event;}

此属性进度是我在搜索此功能时遇到的公共属性，因此可用于制作工作文件上传进度条.

如有任何疑问，请随时联系

I am trying to use the PrimeNG file upload component in a prototype I am making. The demo on their page simulates the files being uploaded, with a progress bar ultimately displaying the message:

Looking at their code, they are using a file upload. which is a dummy file that only contains

<?

So, I added upload.

Looking at the TS, it looks like all that's there is:

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

 this.msgs = [];
 this.msgs.push({ severity: 'info', summary: 'File Uploaded', detail: '' });
}

Am I missing something? I'm just trying to get the demo they have to run in my prototype, to simulate the UI of uploading.

解决方案

For this implement (onProgress)="progressReport($event)" on the p-file upload as

<p-fileUpload #fileuploader [customUpload]="true"  (onProgress)="progressReport($event)"

then in ts file, you can use get access to p-upload via @ViewChild, and then in the code where you are receiving updates of the uploaded percentage, use

      this.fileuploader.onProgress.emit(this.value);

and on the custom onProgress handler we can implement as

progressReport($event: any) {
    this.fileuploader.progress = $event;
}

This property progress is a public property I came across while searching for this feature, so this can be used to have working file upload progress bar.

If still any doubts please feel free to contact

这篇关于使用 PrimeNG 文件上传组件模拟上传?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！