触发时机：创建文件之后的回调，大约是在进行实际的上传前，这个事件经常用来对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> <div> <div role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div> </div> </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 文件拖拽上传实现
拖拽文件默认支持多文件拖拽。
对块级元素进行设置（这里以div标签为例）：
复制代码 代码如下:
<div ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><div>
在组件.ts文件中设置声明函数：
fileOverBase(event) { // 拖拽状态改变的回调函数 } fileDropOver(event) { // 文件拖拽完成的回调函数 }