PrimeNG之FileUpload

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

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

Events

Styling

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

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