[英]How to customize PrimeNG p-fileUpload
我们正在使用来自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>
我现在可以完全控制文件大小,我可以根据需要对其进行格式化,但是我再也没有删除按钮了。 我也需要重新实现它。 仅更改文件大小的格式看起来有点矫枉过正。
正如@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
我不知道这是否仍然有帮助,但我在另一个网页中找到了解决方案。 首先,这是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的派生类替换。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.