如何自定义 PrimeNG p-fileUpload

Question

我们正在使用 PrimeNG 1.0.0-beta.16 中的 p-fileUpload

我想自定义按钮。他们现在有标签“选择”、“上传”和“取消”。如何更改标签？

另一个相关问题。选择一些文件后，将显示文件名和文件大小。如何更改文件大小的格式？它现在显示“877.271 KB”。 3位数字有点混乱。如何将其更改为仅显示 1 位：'877.2 KB'

我尝试了模板：

        <template let-file pTemplate type="file">
            <div>{{file.name}}</div>
            <div>{{file.size}}</div>
        </template>

我现在可以完全控制文件大小，并且可以根据需要对其进行格式化，但我再也没有删除按钮了。我也需要重新实现它。 仅更改文件大小的格式看起来有点矫枉过正。

Answer 1

我不知道这是否仍然有用，但我在另一个网页中找到了解决方案。首先，这里是html部分的代码：

<p-fileUpload #fileUploader name="file">
    <ng-template let-file pTemplate='file'>
        <div>{{file.name}}</div>
        <div>{{file.size | convertFileSize}}</div>
        <div><button icon="fa-close" pButton type="button" label="Remove" (click)="removeFile(file, fileUploader)"></button></div>
    </ng-template>
</p-fileUpload>

因此，该按钮在 component.ts 中调用自定义 removeFile 函数并将要删除的文件（由模板提供）和 fileUpload 组件本身传递给那个方法，就是下面那个：

removeFile(file: File, uploader: FileUpload) {
  const index = uploader.files.indexOf(file);
  uploader.remove(null, index);
}

分析FileUpload原组件的remove方法，发现第一个param（例子中为null）是一个MouseEvent，所以null其实可以替换为 Event 的派生类。

Answer 2

正如@Paul 已经提到的，我们可以使用 HTML 属性轻松修改 3 个标签：

<p-fileUpload name="myfile[]" 
              url="http://localhost:3000/upload"
              chooseLabel="My choose"
              uploadLabel="My upload"
              cancelLabel="My cancel"></p-fileUpload>

负责格式化大小格式化的函数是：

FileUpload.prototype.formatSize = function (bytes) {
  if (bytes == 0) {
    return '0 B';
  }
  var k = 1000, 
      dm = 3, 
      sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],    
      i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
};

我从https://unpkg.com/primeng@2.0.0-rc.1/components/fileupload/fileupload 复制它，我们可以看到dm 变量负责浮点后的位数。让我们把它从 3 修改为 1 并覆盖这个函数。

首先，导入FileUpload类：

import {FileUpload, FileUploadModule} from 'primeng/primeng';

其次，重写其原型的函数：

FileUpload.prototype.formatSize = function (bytes) {
  if (bytes == 0) {
    return '0 B';
  }
  var k = 1000, 
      dm = 1, 
      sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 
      i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
};

plunker：http://plnkr.co/edit/yo6LyYgKlThcewtpjiyI?p=preview