Angular4는 ng2-file-upload의 업로드 구성 요소를 통합합니다.

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:&#39;.2&#39; }} 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]="{ &#39;width&#39;: item.progress + &#39;%&#39; }"></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);
}

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

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