Angular4集成ng2-file-upload的上傳組件

更新時(shí)間：2018年03月14日 14:17:25 作者：gavin

本篇文章主要介紹了Angular4集成ng2-file-upload的上傳組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

本文基于該組件的1.2.1版。

1. 安裝

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

npm install ng2-file-upload --save

2. 使用說明

官方的文檔寫的非常簡(jiǎn)單，幾乎看不出什么來，這里結(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

在對(duì)應(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ù)：

參數(shù)名	參數(shù)類型	是否是可選值	參數(shù)說明
allowedMimeType	Array	可選值
allowedFileType	Array	可選值	允許上傳的文件類型
autoUpload	boolean	可選值	是否自動(dòng)上傳
isHTML5	boolean	可選值	是否是HTML5
filters	Array	可選值
headers	Array	可選值	上傳文件的請(qǐng)求頭參數(shù)
method	string	可選值	上傳文件的方式
authToken	string	可選值	auth驗(yàn)證的token
maxFileSize	number	可選值	最大可上傳文件的大小
queueLimit	number	可選值
removeAfterUpload	boolean	可選值	是否在上傳完成后從隊(duì)列中移除
url	string	可選值	上傳地址
disableMultipart	boolean	可選值
itemAlias	string	可選值	文件標(biāo)記／別名
authTokenHeader	string	可選值	auth驗(yàn)證token的請(qǐng)求頭

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，則通過<input type="file"/>選擇完文件后立即自動(dòng)上傳，為false則需要手工調(diào)用uploader.uploadAll()或者uploader.uploadItem(value: FileItem)方法進(jìn)行手工上傳。

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

application
image
video
audio
pdf
compress
doc
xls
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自身，所以如果想在對(duì)應(yīng)的綁定函數(shù)中使用其他scope對(duì)象，需要使用bind函數(shù)處理對(duì)應(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ù)：

item - 上傳成功的文件信息，F(xiàn)ileItem類型；
response - 上傳成功后服務(wù)器的返回信息；
status - 狀態(tài)碼；
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)常用來對(duì)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ù)：

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

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

2.4.1 input file控件處理

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

復(fù)制代碼代碼如下:

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

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

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

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

復(fù)制代碼代碼如下:

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

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

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

<ion-card>
 <ion-card-header>
 文件上傳操作
 </ion-card-header>
 <ion-card-content>
 <input #fileUpload hidden=true type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />
 <button (click)="fileSelect()" >選擇文件</button>
 <button (click)="fileAllUp()" >全部上傳</button>
 <button (click)="fileAllCancel()" >全部取消</button>
 <button (click)="fileAllDelete()" >清除列表</button>
 </ion-card-content>
</ion-card>
<ion-card>
 <ion-card-header>
 上傳文件列表
 </ion-card-header>
 <ion-card-content>
 <p>已選文件數(shù)量: {{ uploader?.queue?.length }}</p>
 <ion-grid>
  <ion-row>
  <ion-col col-2="">名稱</ion-col>
  <ion-col col-2="">保存名</ion-col>
  <ion-col col-2="">文件大小</ion-col>
  <ion-col col-2="">進(jìn)度</ion-col>
  <ion-col col-1="">狀態(tài)</ion-col>
  <ion-col col-3="">操作</ion-col>
  </ion-row>

  <ion-row *ngFor="let item of uploader.queue">
  <ion-col col-2><strong>{{ item?.file?.name }}</strong></ion-col>
  <ion-col col-2><input type="text" (change)="changeFileName($event, item)"></ion-col>
  <ion-col col-2>
   <span>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</span>
  </ion-col>

  <ion-col col-2>
   <div class="progress" style="margin-bottom: 0; height: 70%; width: 90%">
   <div class="progress-bar" style="margin-bottom: 0; height: 100%; background-color: red" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
   </div>
  </ion-col>
  <ion-col col-1>
   <span *ngIf="item.isSuccess">成功</span>
   <span *ngIf="!item.isUploaded">未上傳</span>
   <span *ngIf="item.isCancel">取消</span>
   <span *ngIf="item.isError">錯(cuò)誤</span>
  </ion-col>
  <ion-col col-3>
   <button (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
   上傳
   </button>
   <button (click)="item.cancel()" [disabled]="!item.isUploading">
   取消
   </button>
   <button (click)="item.remove()">
   清除
   </button>
  </ion-col>
  </ion-row>
 </ion-grid>
 </ion-card-content>
</ion-card>

@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)支持多文件拖拽。
對(duì)塊級(jí)元素進(jìn)行設(shè)置（這里以div標(biāo)簽為例）：

復(fù)制代碼代碼如下:

<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ù)
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Angular4集成ng2-file-upload的上傳組件

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具