Angular2使用ng2-file-upload上傳文件

Angular2中有兩個比較好用的上傳文件的第三方庫熬的，一個是ng2-file-upload匙握，一個是ng2-uploader妨托。ng2-uploader是一個輕便的上傳文件的支持庫，功能較弱盟萨，而ng2-file-upload是一個功能比較全面的上傳文件的支持庫凉翻。這里主要介紹一下ng2-file-upload的使用。

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

作者：Shmily落墨

鏈接：http://www.reibang.com/p/0741186f60ab

? ? ? ? ? ?https://segmentfault.com/a/1190000007886391

????????????http://www.php.cn/js-tutorial-399182.html

來源：簡書

著作權(quán)歸作者所有噪矛。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處铺罢。

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 =newFileUploader({? ? ? ? url:"http://www.download.com:80/uploadFile",? ? ? method:"POST",? ? ? ? itemAlias:"uploadedfile"});

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

|:---- --:|:--------:|:-------------:|:--------:|

| allowedMimeType | Array | 可選值 |? |

| filters | Array | 可選值 |? |

| queueLimit | number | 可選值 |? |

| url | string | 可選值 | 上傳地址 |

| disableMultipart | boolean | 可選值 |? |

2.1 選擇文件

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

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

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

選擇文件默認支持選擇單個文件脉漏，如需支持文件多選，請在標簽中添加multiple屬性袖牙，即：

2.2 拖拽文件

拖拽文件默認支持多文件拖拽侧巨。

對塊級元素進行設(shè)置（這里以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ù)lettempRes =JSON.parse(response);? ? ? ? ? ? }else{// 上傳文件后獲取服務(wù)器返回的數(shù)據(jù)錯誤? ? ? ? }};this.uploader.queue[0].upload();// 開始上傳

3. FileUploader詳解

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

3.1 屬性詳解

isUploading:[boolean]是否正在上傳文件中坦仍。

queue:[array]已經(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;

獲取FileUploader上傳隊列中的所有未上傳的文件碴犬。

getReadyItems(): Array;

獲取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ù)筹麸。

作者：Shmily落墨

鏈接：http://www.reibang.com/p/0741186f60ab

來源：簡書

著作權(quán)歸作者所有活合。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處物赶。