Angular4集成ng2-file-upload

 

在Github上找到了一個支持Angular4好用的文件上傳組件 ng2-file-upload，這裏簡單介紹一下這個庫的集成使用方案。 

本文基於該組件的1.2.1版。

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類型的參數：

參數名	參數類型	是不是可選值	參數說明
allowedMimeType	Array	可選值
allowedFileType	Array	可選值	容許上傳的文件類型
autoUpload	boolean	可選值	是否自動上傳
isHTML5	boolean	可選值	是不是HTML5
filters	Array	可選值
headers	Array	可選值	上傳文件的請求頭參數
method	string	可選值	上傳文件的方式
authToken	string	可選值	auth驗證的token
maxFileSize	number	可選值	最大可上傳文件的大小
queueLimit	number	可選值
removeAfterUpload	boolean	可選值	是否在上傳完成後從隊列中移除
url	string	可選值	上傳地址
disableMultipart	boolean	可選值
itemAlias	string	可選值	文件標記／別名
authTokenHeader	string	可選值	auth驗證token的請求頭

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

 

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上傳文件