Angular2使用ng2-file-upload上傳檔案

標籤：can   stat   檔案上傳   shu   www.   拖拽   狀態代碼   des   ready   

Angular2中有兩個比較好用的上傳檔案的第三方庫，一個是ng2-file-upload，一個是ng2-uploader。ng2-uploader是一個輕便的上傳檔案的支援庫，功能較弱，而ng2-file-upload是一個功能比較全面的上傳檔案的支援庫。這裡主要介紹一下ng2-file-upload的使用。

以下以Mac OS作業系統介紹。

1. 安裝

使用npm安裝即可。在項目中開啟“終端”，運行命令：

sudo npm install ng2-file-upload --save

如果是以systemjs的方式打包，安裝完成後需要開啟systemjs.config.js檔案，在System.config的map欄位中的最後一行輸入以下欄位：

‘ng2-file-upload‘:            ‘npm:ng2-file-upload‘

在System.config的packages欄位中的最後一行輸入：

‘ng2-file-upload‘: {        main: ‘index.js‘,        defaultExtension: ‘js‘}

之後便可以在項目中使用了。

2. 使用

在需要用到的模組中引用模組：

import { CommonModule }     from ‘@angular/common‘;import { FileUploadModule } from ‘ng2-file-upload‘;

然後在@NgModule的imports欄位中引用CommonModule和FileUploadModule。

在對應需要使用的組件內引用：

import { FileUploader } from ‘ng2-file-upload‘;

初始化FileUploader：

uploader:FileUploader = new FileUploader({        url: "http://www.download.com:80/uploadFile",       method: "POST",        itemAlias: "uploadedfile"});

初始化FileUploader需要傳入FileUploaderOptions類型的參數：

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

2.1 選擇檔案

在組件對應的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.2 拖拽檔案

拖拽檔案預設支援多檔案拖拽。
對區塊層級元素進行設定（這裡以div標籤為例）：

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

在組件.ts檔案中設定聲明函數：

fileOverBase(event) {    // 拖拽狀態改變的回呼函數}fileDropOver(event) {    // 檔案拖拽完成的回呼函數}

2.3 檔案上傳

FileUploader有個數群組類型的屬性queue，裡面是所有拖拽的和選擇的檔案，只要操作這個屬性便可以進行檔案上傳。

this.uploader.queue[0].onSuccess = (response, status, headers) => {        // 上傳檔案成功       if (status == 200) {        // 上傳檔案後擷取伺服器返回的資料        let tempRes = JSON.parse(response);            }else {                    // 上傳檔案後擷取伺服器返回的資料錯誤            }};this.uploader.queue[0].upload(); // 開始上傳

3. FileUploader詳解

FileUploader是ng2-file-upload最主要的組件，裡麵包含了所有對檔案的處理。

3.1 屬性詳解

• isUploading:[boolean] 是否正在上傳檔案中。
• queue:[array<FileItem>] 已經拖拽或選擇的所有檔案。
• 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<any>;
  擷取FileUploader上傳隊列中的所有未上傳的檔案。
• getReadyItems(): Array<any>;
  擷取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;
  上傳檔案完成的回呼函數。

Shmily落墨
連結：https://www.jianshu.com/p/0741186f60ab
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。

Angular2使用ng2-file-upload上傳檔案