Angular 如何定制Priming p-fileUpload

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

我想定制按钮。它们现在有“选择”、“上载”和“取消”标签。如何更改标签

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

我试过使用模板：

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

{{file.name}
{{file.size}

我现在可以完全控制文件的大小，我可以按照我的意愿格式化它，但是我不再有删除按钮了。我也需要重新实现这一点。

---

仅更改文件大小的格式似乎有些过分。

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

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

我从中复制了它，我们可以看到，

dm

变量负责浮点数后的位数。让我们将其从3修改为1，并重写此函数

首先，导入

FileUpload

class：

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:

我不知道这是否仍然有用，但我在另一个网页中找到了解决方案。首先，以下是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>

---

通过分析FileUpload原始组件的remove方法，我发现第一个参数（示例中为null）是一个MouseEvent，因此null实际上可以由事件的派生类替换。

请参阅官方文档中的模板部分，感谢您的建议，但我当然看了文件。但它们并没有给出完整的示例，也没有解释如何更改按钮的标签，也没有解释如何更改文件大小的格式。如果你知道怎么做，请给我看一些例子。标签定制很快就会到来，因为我似乎已经用模板选项更新了我的帖子。通过向HTML标签添加

cancelabel=“annueren”

，我现在可以（升级到最新的预涂后）更改按钮上的标签。但我仍然无法覆盖formatSize函数。我试过这个

（formatSize）=“formatSizeCustom”

，但没用。谢谢@Andriy。我用的是打字脚本，还是个新手。如何将此javascript方法转换为TypeScript，因为在TypeScript中粘贴此代码会导致编译错误。请尝试将代码上载到plunker，我将尝试帮助您使用（单击）=“fileUploader.clear（）；”，它将清除上载器和文件。在这种情况下，不需要向ts添加removeFile方法

<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>

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