npm install ng2-file-upload --save

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

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

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

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

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

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

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

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

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

<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 class="progress" style="margin-bottom: 0; height: 70%; width: 90%"><div class="progress-bar"  style="margin-bottom: 0; height: 100%; background-color: red" 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);
}

<div class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><div>

fileOverBase(event) {// 拖拽状态改变的回调函数
}
fileDropOver(event) {// 文件拖拽完成的回调函数
}