PrimeNG之FileUpload

Posted 2020-09-14 地平线很远

--文件上传是一个支持拖放，多文件上传，自动上传，进度跟踪和验证的上传。

Import

import {FileUploadModule} from ‘primeng/primeng‘;

Getting Started

文件上传需要一个URL属性为上传目标和一个名称来标识在后端的文件。

<p-fileUpload name="myfile[]" url="http://localhost:3000/upload"></p-fileUpload>

Multiple Uploads

只有一个文件可以同时被选择，允许选择倍数启用多个选项

<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"></p-fileUpload>

DragDrop

文件选择也可以通过拖放一个或多个到组件的内容部分来完成。

Auto Uploads

启用自动属性后，一旦文件选择完成或文件在下拉区域被拖放，上传将开始。

 

<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
        accept="image/*" auto="auto"></p-fileUpload>

 File Types

可选的文件类型可以接受属性限制，下面的例子只允许上传图片

<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
        accept="image/*"></p-fileUpload>

File Size

最大文件大小可以限制使用MAXFILESIZE属性定义的字节数。

<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
        accept="image/*" maxFileSize="1000000"></p-fileUpload>

 

为了自定义默认消息使用invalidfilesizemessagesummary和invalidfilesizemessagedetail选项。总之{ 0}占位符是指文件名和详细的文件大小。

• invalidFileSizeMessageSummary: ‘{0}: Invalid file size, ‘          --（“{ 0 }：无效的文件大小，”）
• invalidFileSizeMessageDetail: string = ‘maximum upload size is {0}.‘     --（字符串的最大上传大小是{ 0 }）

Templating

文件列表UI是可定制的使用ng-template称为“file”，得到的文件实例作为隐式变量。命名为“内容”的第二个NG模板可用于将自定义内容放置在内容节中，这将有助于实现用户界面管理上传的文件，例如删除它们。第三和最后NG模板选项是“toolbar”，以显示自定义内容工具栏。

<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
        accept="image/*" maxFileSize="1000000">
        <ng-template pTemplate="toolbar">
            <div>Upload 3 Files</div>
        </ng-template>  
        <ng-template let-file pTemplate="file">
            <div>Custom UI to display a file</div>
        </ng-template> 
        <ng-template pTemplate="content">
            <div>Custom UI to manage uploaded files</div>
        </ng-template>  
</p-fileUpload>

 

Request Customization

XHR请求上传文件可以定制使用onbeforeupload回调通过XHR实例和表单对象作为事件参数。

Attributes

 

Name	Type	Default	Description
name	string	null	Name of the request parameter to identify the files at backend.
url	string	null	Remote url to upload the files.
multiple	boolean	false	Used to select multiple files at once from file dialog.
accept	string	false	Pattern to restrict the allowed file types such as "image/*".
disabled	boolean	false	Disables the upload functionality.
auto	boolean	false	When enabled, upload begins automatically after selection is completed.
maxFileSize	number	null	Maximum file size allowed in bytes.
invalidFileSizeMessageSummary	string	"{0}: Invalid file size, "	Summary message of the invalid fize size.
invalidFileSizeMessageDetail	string	"maximum upload size is {0}."	Detail message of the invalid fize size.
invalidFileTypeMessageSummary	string	"{0}: Invalid file type, "	Summary message of the invalid fize type.
invalidFileTypeMessageDetail	string	"allowed file types: {0}."	Detail message of the invalid fize type.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
previewWidth	number	50	Width of the image thumbnail in pixels.
chooseLabel	string	Choose	Label of the choose button.
uploadLabel	string	Upload	Label of the upload button.
cancelLabel	string	Cancel	Label of the cancel button.

 

Events

Name	Parameters	Description
onBeforeUpload	event.xhr: XmlHttpRequest instance. event.formData: FormData object.	Callback to invoke before file upload begins to customize the request such as post parameters before the files.
onBeforeSend	event.xhr: XmlHttpRequest instance. event.formData: FormData object.	Callback to invoke before file send begins to customize the request such as adding headers.
onUpload	event.xhr: XmlHttpRequest instance. event.files: Uploaded files.	Callback to invoke when file upload is complete.
onError	event.xhr: XmlHttpRequest instance. event.files: Files that are not uploaded.	Callback to invoke if file upload fails.
onClear	-.	Callback to invoke when files in queue are removed without uploading.
onSelect	event.originalEvent: Original browser event. event.files: List of selected files.	Callback to invoke when file upload is complete.

 Styling

以下是结构式的类列表，对于主题类主题页面访问。

 

Name	Element
ui-fileupload	Container element
ui-fileupload-buttonbar	Header containing the buttons
ui-fileupload-content	Content section

 

 demo code

export class FileUploadDemo {

    msgs: Message[];
    
    uploadedFiles: any[] = [];

    onUpload(event) {
        for(let file of event.files) {
            this.uploadedFiles.push(file);
        }
    
        this.msgs = [];
        this.msgs.push({severity: ‘info‘, summary: ‘File Uploaded‘, detail: ‘‘});
    }
}

FileUploadDemo.ts

<p-growl [value]="msgs"></p-growl>
    
<p-fileUpload name="demo[]" url="http://localhost:3000/upload" (onUpload)="onUpload($event)" 
        multiple="multiple" accept="image/*" maxFileSize="1000000">
    <ng-template pTemplate type="content">
        <ul *ngIf="uploadedFiles.length">
            <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
        </ul>
    </ng-template>        
</p-fileUpload>

FileUploadDemo .html

 

 参考资料

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