Angular2中有兩個比較好用的上傳文件的第三方庫，一個是ng2-file-upload腺毫，一個是ng2-uploader癣疟。ng2-uploader是一個輕便的上傳文件的支持庫，功能較弱潮酒，而ng2-file-upload是一個功能比較全面的上傳文件的支持庫睛挚。這里主要介紹一下ng2-file-upload的使用。

以下以Mac OS操作系統(tǒng)介紹急黎。

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故源。

在對應(yīng)需要使用的組件內(nèi)引用：

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

初始化FileUploader：

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

初始化FileUploader需要傳入FileUploaderOptions類型的參數(shù)：

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

2.1 選擇文件

在組件對應(yīng)的HTML模版中設(shè)置input標簽：

<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />

在組件.ts文件中設(shè)置聲明函數(shù)：

selectedFileOnChanged() {
    // 這里是文件選擇完成后的操作處理
}

選擇文件默認支持選擇單個文件污抬，如需支持文件多選，請在標簽中添加multiple屬性绳军，即：

<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />

2.2 拖拽文件

拖拽文件默認支持多文件拖拽印机。
對塊級元素進行設(shè)置（這里以div標簽為例）：

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

在組件.ts文件中設(shè)置聲明函數(shù)：

fileOverBase(event) {
    // 拖拽狀態(tài)改變的回調(diào)函數(shù)
}
fileDropOver(event) {
    // 文件拖拽完成的回調(diào)函數(shù)
}

2.3 文件上傳

FileUploader有個數(shù)組類型的屬性queue，里面是所有拖拽的和選擇的文件删铃，只要操作這個屬性便可以進行文件上傳耳贬。

this.uploader.queue[0].onSuccess = (response, status, headers) => {    
    // 上傳文件成功   
    if (status == 200) {
        // 上傳文件后獲取服務(wù)器返回的數(shù)據(jù)
        let tempRes = JSON.parse(response);        
    }else {            
        // 上傳文件后獲取服務(wù)器返回的數(shù)據(jù)錯誤        
    }
};
this.uploader.queue[0].upload(); // 開始上傳

3. FileUploader詳解

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

3.1 屬性詳解

• isUploading:[boolean] 是否正在上傳文件中咒劲。
• queue:[array<FileItem>] 已經(jīng)拖拽或選擇的所有文件顷蟆。
• progress:[number] 所有的上傳文件的整體進度。
• options:[FileUploaderOptions] 上傳文件的配置信息腐魂，前面已經(jīng)介紹過帐偎。

3.2 方法詳解

• setOptions(options: FileUploaderOptions): void;
  設(shè)置上傳文件的配置信息。
• 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 監(jiān)聽詳解

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

4. FileItem詳解

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

4.1 屬性詳解

• alias [string] : 上傳的標志／別名。
• url [string] : 地址计贰。
• method [string] : 上傳的方法钦睡。
• headers [any] : 上傳的頭部參數(shù)。
• withCredentials: [boolean] : 是否使用證書蹦玫。
• formData [any] : 格式化數(shù)據(jù)赎婚？
• isReady [boolean] : 是否準備上傳（是否可以上傳）。
• isUploading [boolean] : 是否正在上傳樱溉。
• isUploaded [boolean] : 是否已經(jīng)上傳過挣输。
• isSuccess [boolean] : 是否上傳成功。
• isCancel [boolean] : 是否取消上傳福贞。
• isError [boolean] : 是否上傳錯誤撩嚼。
• progress [number] : 上傳進度。
• index [number] : 在隊列中的位置挖帘。

4.2 方法詳解

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

4.3 監(jiān)聽詳解

• onBeforeUpload(): void;
  開始上傳之前的回調(diào)函數(shù)逻族。
• onBuildForm(form: any): any;
  創(chuàng)建文件的回調(diào)函數(shù)。
  返回：
• form - 文件來源骄崩。
• onProgress(progress: number): any;
  上傳文件的進度回調(diào)函數(shù)聘鳞。
  返回：
• progress - 上傳文件的進度薄辅。
• onSuccess(response: string, status: number, headers: ParsedResponseHeaders): any;
  上傳文件成功的回調(diào)函數(shù)。
  返回：
• response - 成功后的回調(diào)數(shù)據(jù)
• status - 狀態(tài)碼
• headers - 回調(diào)數(shù)據(jù)的返回頭
• onError(response: string, status: number, headers: ParsedResponseHeaders): any;
  上傳文件錯誤的回調(diào)函數(shù)抠璃。
• onCancel(response: string, status: number, headers: ParsedResponseHeaders): any;
  取消上傳的回調(diào)函數(shù)站楚。
• onComplete(response: string, status: number, headers: ParsedResponseHeaders): any;
  上傳文件完成的回調(diào)函數(shù)。