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
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。