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

Question

我正在尝试在我制作的原型中使用 PrimeNG文件上传组件。 demo on their page模拟正在上传的文件，进度条最终显示消息：

查看他们的代码，他们使用的文件upload.php是一个只包含

的虚拟文件

<?php echo '<p>Fake Upload Process</p>'; ?>

所以，我添加了upload.php，我在截图中得到了消息，但没有进度条。

看看TS，它看起来就像是：

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

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

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

Answer 1

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

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

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

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

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

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

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

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