如何在primeng fileupload上显示maxFileSize消息？答案

【问题标题】：How to show maxFileSize message on primeng fileupload?如何在primeng fileupload上显示maxFileSize消息？
【发布时间】：2019-06-15 16:30:36
【问题描述】：

我正在使用primeng文件上传

https://www.primefaces.org/primeng/#/fileupload

喜欢这个

<p-fileUpload id="btn_uploadImage" accept="image/*" maxFileSize="2000000"
              class="btn btn-primary"
              auto="true"
              mode="basic"
              name="myFile[]" chooseLabel="{{ 'ASSETS.BACKGROUND_IMAGE' | translate}}"
              title="{{'ASSETS.CHANGE_BACKGROUND_IMAGE' | translate}}"
              [url]="apiImageLocation"
              (onUpload)="onUploadImageSuccess($event)" (onError)="onUploadImageError($event)">
</p-fileUpload>

maxFileSize 限制有效。不会上传太大的文件，但我从来没有看到 invalidFileSizeMessage。在primeng演示页面上，消息未以基本模式显示...

如何显示/翻译无效文件大小消息？

【问题讨论】：

标签： angular file-upload primeng

【解决方案1】：

您需要使用自定义模式。因为基本模式没有消息内容。喜欢;

<p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)"
        multiple="multiple" accept="image/*" maxFileSize="100">
</p-fileUpload>

这会奏效的。

【讨论】：

【解决方案2】：

找到解决办法

<p-fileUpload #fileUpload
              auto="true"
              mode="basic"
              [url]="apiImageLocation" accept="image/*"
              maxFileSize="2097152" (onSelect)="validateFileSize($event, fileUpload.maxFileSize)">
</p-fileUpload>

组件.ts

public validateFileSize($event: any, maxFileSize: number): void {
    if ($event.files[0].size > maxFileSize) {
      this.toastService.errorMessage("Action");
    }
  }

【讨论】：