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"]);
 }
}

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

 
 文件上传操作
 
 
 
 选择文件
 全部上传
 全部取消
 清除列表
 


 
 上传文件列表
 
 
 
已选文件数量: {{ uploader&＃63;.queue&＃63;.length }}
 
  
  名称
  保存名
  文件大小
  进度
  状态
  操作
  

  
  {{ item&＃63;.file&＃63;.name }}
  
  
   {{ item&＃63;.file&＃63;.size/1024/1024 | number:'.2' }} MB
  

  
   

   

   
  
  
   成功
   未上传
   取消
   错误
  
  
   
   上传
   
   
   取消
   
   
   清除
   
  
  
 
 

@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);
}