Angular4集成ng2-file-upload

阿新 • • 發佈：2017-07-29

button mathjax 行處理 template 選擇 scrip {} native parse

1. 安裝
2. 使用說明
　　2.1. 集成到Module中
　　2.2. 初始化FileUploader
　　　　2.2.1. 關鍵參數說明
　　2.3. FileUploader常用事件綁定
　　　　2.3.1. onAfterAddingFile
　　　　2.3.2. onSuccessItem
　　　　2.3.3. onBuildItemForm
　　2.4. Template中文件上傳控件處理
　　　　2.4.1 input file控件處理
　　　　2.4.2 支持文件多選的實現示例
　　　　2.4.3 文件拖拽上傳實現
3. FileUploader詳解
　　3.1. 屬性詳解
　　3.2. 方法詳解

　　3.3. 監聽詳解
4. FileItem詳解
　　4.1. 屬性詳解
　　4.2. 方法詳解
　　4.3. 監聽詳解

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

1. 安裝

安裝非常簡單，只要在項目根路徑下運行如下npm命令即可:

npm install ng2-file-upload --save

2. 使用說明

官方的文檔寫的非常簡單，幾乎看不出什麽來，這裏結合實際的使用調試，說明一下基本的配置和使用方案。

2.1. 集成到Module中

在需要使用的Module中需要引入如下兩個模塊：

…
import { CommonModule } from [email protected]/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，則通過選擇完文件後立即自動上傳，為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);
}

一下內容引用自參考文件Angular2使用ng2-file-upload上傳文件

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) {
    // 文件拖拽完成的回調函數
}

3. FileUploader詳解

FileUploader是ng2-file-upload最主要的部件，裏面包含了所有對文件的處理。

3.1. 屬性詳解

isUploading:[boolean] 是否正在上傳文件中。
queue:[array] 已經拖拽或選擇的所有文件。
progress:[number] 所有的上傳文件的整體進度。
options:[FileUploaderOptions] 上傳文件的配置信息，前面已經介紹過。

3.2. 方法詳解

setOptions(options: FileUploaderOptions): void;
設置上傳文件的配置信息。
addToQueue(files: File[], options?: FileUploaderOptions, filters?: FilterFunction[] | string): void;
手動添加文件到FileUploader的上傳隊列中。
removeFromQueue(value: FileItem): void;
從FileUploader的上傳隊列中移除指定文件。
clearQueue(): void;
清除FileUploader上傳隊列中的所有文件。
uploadItem(value: FileItem): void;
上傳指定文件。
cancelItem(value: FileItem): void;
取消指定文件的上傳。
uploadAll(): void;
上傳FileUploader的上傳隊列中的所有文件。
cancelAll(): void;
取消FileUploader的上傳隊列中的所有文件的上傳。
isFile(value: any): boolean;
判斷是否是文件。
getIndexOfItem(value: any): number;
獲取文件在FileUploader上傳隊列中的位置。
getNotUploadedItems(): Array;
獲取FileUploader上傳隊列中的所有未上傳的文件。
getReadyItems(): Array;
獲取FileUploader上傳隊列中的所有準備上傳的文件。
destroy(): void;
銷毀FileUploader實例。

3.3. 監聽詳解

onAfterAddingAll(fileItems: any): any;
添加完所有文件之後的回調
參數：
- fileItems - 添加的文件的數組
onBuildItemForm(fileItem: FileItem, form: any): any;
創建文件之後的回調
參數：
- fileItem - 創建的文件
- form - 添加的方式
onAfterAddingFile(fileItem: FileItem): any;
添加一個文件之後的回調
參數：
- fileItem - 添加的文件
onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any): any;
添加文件失敗的回調
參數：
- item -
- filter -
- options -
onBeforeUploadItem(fileItem: FileItem): any;
要上傳文件之前的回調
參數：
- fileItem - 將要上傳的文件
onProgressItem(fileItem: FileItem, progress: any): any;
上傳文件的進度（開始上傳後調用非常頻繁）
參數：
- fileItem - 正在上傳的文件
- progress - 該文件的上傳進度
onProgressAll(progress: any): any;
整體的上傳進度的回調（開始上傳後調用非常頻繁）
參數：
- progress - 整體的上傳文件的進度
onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
上傳一個文件成功的回調
參數：
- item - 上傳成功的文件
- response - 上傳成功後服務器的返回
- status - 狀態碼
- headers - 上傳成功後服務器的返回的返回頭
onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
上傳一個文件錯誤的回調
參數：
- item - 上傳錯誤的文件
- response - 返回的錯誤
- status - 狀態碼
- headers - 返回的錯誤返回頭
onCancelItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
取消上傳一個文件的回調
參數：
- item - 取消上傳的文件
- response - 取消的返回信息
- status - 狀態碼
- headers - 取消的返回信息的返回頭
onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
完成上傳一個文件的回調
參數：
- item - 上傳成功的文件
- response - 上傳成功後服務器的返回
- status - 狀態碼
- headers - 上傳成功後服務器的返回的返回頭
onCompleteAll(): any;
完成上傳所有文件的回調

4. FileItem詳解

FileItem是FileUploader中queue屬性的元素類型，在FileUploader中存儲的文件的基本類型。

4.1. 屬性詳解

alias [string] : 上傳的標誌／別名。
url [string] : 地址。
method [string] : 上傳的方法。
headers [any] : 上傳的頭部參數。
withCredentials: [boolean] : 是否使用證書。
formData [any] : 格式化數據？
isReady [boolean] : 是否準備上傳（是否可以上傳）。
isUploading [boolean] : 是否正在上傳。
isUploaded [boolean] : 是否已經上傳過。
isSuccess [boolean] : 是否上傳成功。
isCancel [boolean] : 是否取消上傳。
isError [boolean] : 是否上傳錯誤。
progress [number] : 上傳進度。
index [number] : 在隊列中的位置。

4.2. 方法詳解

upload(): void;
開始上傳這個文件。
cancel(): void;
取消上傳這個文件。
remove(): void;
將這個文件從上傳隊列中移除。

4.3. 監聽詳解

onBeforeUpload(): void;
開始上傳之前的回調函數。
onBuildForm(form: any): any;
創建文件的回調函數。
參數：
- form - 文件來源。
onProgress(progress: number): any;
上傳文件的進度回調函數。
參數：
- progress - 上傳文件的進度。
onSuccess(response: string, status: number, headers: ParsedResponseHeaders): any;
上傳文件成功的回調函數。
參數：
- response - 成功後的回調數據
- status - 狀態碼
- headers - 回調數據的返回頭
onError(response: string, status: number, headers: ParsedResponseHeaders): any;
上傳文件錯誤的回調函數。
onCancel(response: string, status: number, headers: ParsedResponseHeaders): any;
取消上傳的回調函數。
onComplete(response: string, status: number, headers: ParsedResponseHeaders): any;
上傳文件完成的回調函數。

參考：
Angular2使用ng2-file-upload上傳文件

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">

來自為知筆記(Wiz)

Angular4集成ng2-file-upload

button mathjax 行處理 template 選擇 scrip {} native parse 1. 安裝2. 使用說明　　2.1. 集成到Module中　　2.2. 初始化FileUploader　　　　2.2.1. 關鍵參數說明　　2.3. FileUp

Angular4集成ng2-file-upload

1. 安裝

2. 使用說明

2.1. 集成到Module中

2.2. 初始化FileUploader

2.2.1. 關鍵參數說明

2.3. FileUploader常用事件綁定

2.3.1. onAfterAddingFile

2.3.2. onSuccessItem

2.3.3. onBuildItemForm

2.4. Template中文件上傳控件處理

2.4.1 input file控件處理

2.4.2 支持文件多選的實現示例

2.4.3 文件拖拽上傳實現

3. FileUploader詳解

3.1. 屬性詳解

3.2. 方法詳解

3.3. 監聽詳解

4. FileItem詳解

4.1. 屬性詳解

4.2. 方法詳解

4.3. 監聽詳解

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">

相關推薦

2.4.1 `input file`控件處理