安装非常简单,只要在项目根路径下运行如下npm命令即可:

npm install ng2-file-upload --save

2. 使用说明

官方的文档写的非常简单,几乎看不出什么来,这里结合实际的使用调试,说明一下基本的配置和使用方案。

2.1. 集成到Module中

在需要使用的Module中需要引入如下两个模块:

… import { CommonModule } from '@angular/common'; import { FileUploadModule } from 'ng2-file-upload'; … @NgModule({ … imports: [ … CommonModule, FileUploadModule … ], … }) export class ProjectDetailPageModule {}

2.2. 初始化FileUploader

在对应的使用的Component中,需要引入FileUploader:

import { FileUploader } from 'ng2-file-upload';

然后声明一个FileUploader类型的变量,并将其初始化:

uploader:FileUploader = new FileUploader({ url: commonConfig.baseUrl + "/uploadFile", method: "POST", itemAlias: "uploadedfile", autoUpload: false });

初始化FileUploader需要传入FileUploaderOptions类型的参数:

参数名参数类型是否是可选值参数说明

allowedMimeTypeArray可选值

allowedFileTypeArray可选值允许上传的文件类型

autoUploadboolean可选值是否自动上传

isHTML5boolean可选值是否是HTML5

filtersArray可选值

headersArray可选值上传文件的请求头参数

methodstring可选值上传文件的方式

authTokenstring可选值auth验证的token

maxFileSizenumber可选值最大可上传文件的大小

queueLimitnumber可选值

removeAfterUploadboolean可选值是否在上传完成后从队列中移除

urlstring可选值上传地址

disableMultipartboolean可选值

itemAliasstring可选值文件标记/别名

authTokenHeaderstring可选值auth验证token的请求头

2.2.1. 关键参数说明

headers: 这里参数一个Array类型,数组内接收的类型为{name: 'headerName', value: 'haederValue'},例如:

this.uploader = new FileUploader({ url: commonConfig.baseUrl + "/uploadFile", method: "POST", itemAlias: "uploadedfile", autoUpload: false, headers:[ {name:"x-AuthenticationToken",value:"dd32fdfd32fs23fds9few"} ] });

autoUpload: 是否自动上传,如果为true,则通过<input type="file"/>选择完文件后立即自动上传,为false则需要手工调用uploader.uploadAll()或者uploader.uploadItem(value: FileItem)方法进行手工上传。

allowedFileType: 这个文件类型并非我们认为的文件后缀,不管选择哪一个值,并不会过滤弹出文件选择时显示的文件类型,只是选择后,非该类型的文件会被过滤掉,例如allowedFileType:["image","xls"],可选值为:

application

image

video

audio

pdf

compress

doc

xls

ppt

allowedMimeType: 这个是通过Mime类型进行过滤,例如allowedMimeType: ['image/jpeg', 'image/png' ],跟上面的allowedFileType参数一样,不管选择哪一个值,并不会过滤弹出文件选择时显示的文件类型,只是选择后,非该类型的文件会被过滤掉。

2.3. FileUploader常用事件绑定

注意基于uploader事件绑定的函数其默认scope为uploader自身,所以如果想在对应的绑定函数中使用其他scope对象,需要使用bind函数处理对应的绑定函数,如下:

this.uploader.onSuccessItem = this.successItem.bind(this);

下面介绍三个常用的事件

2.3.1. onAfterAddingFile

onAfterAddingFile(fileItem: FileItem): any;

触发时机:添加一个文件之后的回调

参数: fileItem - 添加的文件信息,FileItem类型。

2.3.2. onSuccessItem

onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;

触发时机:上传一个文件成功后回调

参数:

item - 上传成功的文件信息,FileItem类型;

response - 上传成功后服务器的返回信息;

status - 状态码;

headers - 上传成功后服务器的返回的返回头。

2.3.3. onBuildItemForm

onBuildItemForm(fileItem: FileItem, form: any): any;

触发时机:创建文件之后的回调,大约是在进行实际的上传前,这个事件经常用来对form进行处理,用以传递一些文件以外的业务相关信息。

例如:

this.uploader.onBuildItemForm = this.buildItemForm; … buildItemForm(fileItem: FileItem, form: any): any{ if(!!fileItem["realFileName"]){ form.append("fileName",fileItem["realFileName"]); } }

参数:

fileItem - 要上传的文件信息,FileItem类型;

form - 表单信息,用来添加文件相关的业务信息,方便后台处理,FormData类型。

2.4. Template中文件上传控件处理

2.4.1 input file控件处理

在组件对应的HTML模版中设置input标签:

<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />

在组件.ts文件中设置声明函数:

selectedFileOnChanged() { // 这里是文件选择完成后的操作处理 }

选择文件默认支持选择单个文件,如需支持文件多选,请在标签中添加multiple属性,即:

<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />

2.4.2 支持文件多选的实现示例

下面是参考官方示例改造的一个文件多选时的template及相关后台代码的配置示例:

<ion-card> <ion-card-header> 文件上传操作 </ion-card-header> <ion-card-content> <input #fileUpload hidden=true type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple /> <button (click)="fileSelect()" >选择文件</button> <button (click)="fileAllUp()" >全部上传</button> <button (click)="fileAllCancel()" >全部取消</button> <button (click)="fileAllDelete()" >清除列表</button> </ion-card-content> </ion-card> <ion-card> <ion-card-header> 上传文件列表 </ion-card-header> <ion-card-content> <p>已选文件数量: {{ uploader?.queue?.length }}</p> <ion-grid> <ion-row> <ion-col col-2="">名称</ion-col> <ion-col col-2="">保存名</ion-col> <ion-col col-2="">文件大小</ion-col> <ion-col col-2="">进度</ion-col> <ion-col col-1="">状态</ion-col> <ion-col col-3="">操作</ion-col> </ion-row> <ion-row *ngFor="let item of uploader.queue"> <ion-col col-2><strong>{{ item?.file?.name }}</strong></ion-col> <ion-col col-2><input type="text" (change)="changeFileName($event, item)"></ion-col> <ion-col col-2> <span>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</span> </ion-col> <ion-col col-2> <p class="progress" style="margin-bottom: 0; height: 70%; width: 90%"> <p class="progress-bar" style="margin-bottom: 0; height: 100%; background-color: red" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></p> </p> </ion-col> <ion-col col-1> <span *ngIf="item.isSuccess">成功</span> <span *ngIf="!item.isUploaded">未上传</span> <span *ngIf="item.isCancel">取消</span> <span *ngIf="item.isError">错误</span> </ion-col> <ion-col col-3> <button (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess"> 上传 </button> <button (click)="item.cancel()" [disabled]="!item.isUploading"> 取消 </button> <button (click)="item.remove()"> 清除 </button> </ion-col> </ion-row> </ion-grid> </ion-card-content> </ion-card>@ViewChild('firstInput', { read: MdInputDirective }) firstInput: MdInputDirective; @ViewChild('fileUpload') fileUpload: ElementRef; … this.uploader = new FileUploader({ url: commonConfig.baseUrl + "/uploadFile", method: "POST", itemAlias: "uploadedfile", autoUpload: false }); this.uploader.onSuccessItem = this.successItem.bind(this); this.uploader.onAfterAddingFile = this.afterAddFile; this.uploader.onBuildItemForm = this.buildItemForm; … fileSelect(): any{ this.fileUpload.nativeElement.click(); } fileAllUp(): any{ this.uploader.uploadAll(); } fileAllCancel(): any{ this.uploader.cancelAll(); } fileAllDelete(): any{ this.uploader.clearQueue(); } selectedFileOnChanged(event) { // 这里是文件选择完成后的操作处理 } buildItemForm(fileItem: FileItem, form: any): any{ if(!!fileItem["realFileName"]){ form.append("fileName",fileItem["realFileName"]); } } afterAddFile(fileItem: FileItem): any{ } changeFileName(value: any, fileItem: FileItem){ fileItem["realFileName"] = value.target.value; } successItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders):any{ // 上传文件成功 if (status == 200) { // 上传文件后获取服务器返回的数据 let tempRes = JSON.parse(response); }else { // 上传文件后获取服务器返回的数据错误 } console.info(response+" for "+item.file.name + " status " + status); }

2.4.3 文件拖拽上传实现