如何自定義 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

正如@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

Answer 2

我不知道這是否仍然有幫助，但我在另一個網頁中找到了解決方案。 首先，這是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的派生類替換。