在Github上找到了一個(gè)支持Angular4好用的文件上傳組件ng2-file-upload，這里簡單介紹一下這個(gè)庫的集成使用方案。

站在用戶的角度思考問題，與客戶深入溝通，找到嘉蔭網(wǎng)站設(shè)計(jì)與嘉蔭網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請域名、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋嘉蔭地區(qū)。

本文基于該組件的1.2.1版。

1. 安裝

安裝非常簡單，只要在項(xiàng)目根路徑下運(yùn)行如下npm命令即可:

npm install ng2-file-upload --save

2. 使用說明

官方的文檔寫的非常簡單，幾乎看不出什么來，這里結(jié)合實(shí)際的使用調(diào)試，說明一下基本的配置和使用方案。

2.1. 集成到Module中

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

…
import { CommonModule } from '@angular/common';
import { FileUploadModule } from 'ng2-file-upload';
…
@NgModule({
 …
 imports: [
 …
 CommonModule,
 FileUploadModule
 …
 ],
 …
})
export class ProjectDetailPageModule {}

2.2. 初始化FileUploader

在對應(yīng)的使用的Component中，需要引入FileUploader：

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

然后聲明一個(gè)FileUploader類型的變量，并將其初始化：

uploader:FileUploader = new FileUploader({ 
 url: commonConfig.baseUrl + "/uploadFile", 
 method: "POST", 
 itemAlias: "uploadedfile",
 autoUpload: false
});

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

2.2.1. 關(guān)鍵參數(shù)說明

headers: 這里參數(shù)一個(gè)Array類型，數(shù)組內(nèi)接收的類型為{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: 是否自動(dòng)上傳，如果為true，則通過選擇完文件后立即自動(dòng)上傳，為false則需要手工調(diào)用uploader.uploadAll()或者uploader.uploadItem(value: FileItem)方法進(jìn)行手工上傳。

allowedFileType: 這個(gè)文件類型并非我們認(rèn)為的文件后綴，不管選擇哪一個(gè)值，并不會(huì)過濾彈出文件選擇時(shí)顯示的文件類型，只是選擇后，非該類型的文件會(huì)被過濾掉，例如allowedFileType:["image","xls"],可選值為：

1. application
2. image
3. video
4. audio
5. pdf
6. compress
7. doc
8. xls
9. ppt

allowedMimeType: 這個(gè)是通過Mime類型進(jìn)行過濾，例如allowedMimeType: ['image/jpeg', 'image/png' ],跟上面的allowedFileType參數(shù)一樣，不管選擇哪一個(gè)值，并不會(huì)過濾彈出文件選擇時(shí)顯示的文件類型，只是選擇后，非該類型的文件會(huì)被過濾掉。

2.3. FileUploader常用事件綁定

注意基于uploader事件綁定的函數(shù)其默認(rèn)scope為uploader自身，所以如果想在對應(yīng)的綁定函數(shù)中使用其他scope對象，需要使用bind函數(shù)處理對應(yīng)的綁定函數(shù)，如下：

this.uploader.onSuccessItem = this.successItem.bind(this);

下面介紹三個(gè)常用的事件

2.3.1. onAfterAddingFile

onAfterAddingFile(fileItem: FileItem): any;

觸發(fā)時(shí)機(jī)：添加一個(gè)文件之后的回調(diào)

參數(shù)： fileItem - 添加的文件信息，F(xiàn)ileItem類型。

2.3.2. onSuccessItem

onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;

觸發(fā)時(shí)機(jī)：上傳一個(gè)文件成功后回調(diào)

參數(shù)：

1.  item - 上傳成功的文件信息，F(xiàn)ileItem類型；
2. response - 上傳成功后服務(wù)器的返回信息；
3. status - 狀態(tài)碼；
4. headers - 上傳成功后服務(wù)器的返回的返回頭。

2.3.3. onBuildItemForm

onBuildItemForm(fileItem: FileItem, form: any): any;

觸發(fā)時(shí)機(jī)：創(chuàng)建文件之后的回調(diào)，大約是在進(jìn)行實(shí)際的上傳前，這個(gè)事件經(jīng)常用來對form進(jìn)行處理，用以傳遞一些文件以外的業(yè)務(wù)相關(guān)信息。 

例如：

this.uploader.onBuildItemForm = this.buildItemForm;
…
buildItemForm(fileItem: FileItem, form: any): any{
 if(!!fileItem["realFileName"]){
 form.append("fileName",fileItem["realFileName"]);
 }
}

參數(shù)：

1. fileItem - 要上傳的文件信息，F(xiàn)ileItem類型；
2. form - 表單信息，用來添加文件相關(guān)的業(yè)務(wù)信息，方便后臺處理，F(xiàn)ormData類型。

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

2.4.1 input file控件處理

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

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

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

選擇文件默認(rèn)支持選擇單個(gè)文件，如需支持文件多選，請?jiān)跇?biāo)簽中添加multiple屬性，即：

2.4.2 支持文件多選的實(shí)現(xiàn)示例

下面是參考官方示例改造的一個(gè)文件多選時(shí)的template及相關(guān)后臺代碼的配置示例：

 
 文件上傳操作
 
 
 
 選擇文件
 全部上傳
 全部取消
 清除列表
 


 
 上傳文件列表
 
 
 
已選文件數(shù)量: {{ uploader?.queue?.length }}
 
  
  名稱
  保存名
  文件大小
  進(jìn)度
  狀態(tài)
  操作
  

  
  {{ item?.file?.name }}
  
  
   {{ item?.file?.size/1024/1024 | number:'.2' }} MB
  

  
   

   

   
  
  
   成功
   未上傳
   取消
   錯(cuò)誤
  
  
   
   上傳
   
   
   取消
   
   
   清除
   
  
  
 
 

@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) {
 // 上傳文件后獲取服務(wù)器返回的數(shù)據(jù)
 let tempRes = JSON.parse(response);  
 }else {   
 // 上傳文件后獲取服務(wù)器返回的數(shù)據(jù)錯(cuò)誤  
 }
 console.info(response+" for "+item.file.name + " status " + status);
}

2.4.3 文件拖拽上傳實(shí)現(xiàn)

拖拽文件默認(rèn)支持多文件拖拽。
 對塊級元素進(jìn)行設(shè)置（這里以div標(biāo)簽為例）：

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