Angular4集成ng2-file-upload

在Github上找到了一个支持Angular4好用的文件上传组件ng2-file-upload，这里简单介绍一下这个库的集成使用方案。

本文基于该组件的1.2.1版。

安装非常简单，只要在项目根路径下运行如下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类型的参数：

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>
          <div class="progress" >
            <div class="progress-bar"   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 class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><div>

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

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

参考：

Angular2使用ng2-file-upload上传文件