PrimeNG之FileUpload

Posted 地平线很远

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

 

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

 NameParametersDescription
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

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

 

 NameElement
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

 

以上是关于PrimeNG之FileUpload的主要内容,如果未能解决你的问题,请参考以下文章

如何在 PrimeNG 的 FileUpload 组件中中止文件上传?

为啥我的 PrimeNG FileUpload 组件存在这个问题,该组件与引用不存在的页面的 url 参数相关

文件上传之Apache commons fileupload使用

通过 PrimeNG 从代码 Angular 2 打开上下文菜单

文件上传之 commons-fileupload

文件上传之 commons-fileupload