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

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

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

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

本文基于該組件的1.2.1版。

1. 安裝

安裝非常簡單，只要在項目根路徑下運行如下npm命令即可:

npm install ng2-file-upload --save

2. 使用說明

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

2.1. 集成到Module中

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

…
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';

然后聲明一個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	可選值	是否自動上傳
isHTML5	boolean	可選值	是否是HTML5
filters	Array	可選值
headers	Array	可選值	上傳文件的請求頭參數(shù)
method	string	可選值	上傳文件的方式
authToken	string	可選值	auth驗證的token
maxFileSize	number	可選值	最大可上傳文件的大小
queueLimit	number	可選值
removeAfterUpload	boolean	可選值	是否在上傳完成后從隊列中移除
url	string	可選值	上傳地址
disableMultipart	boolean	可選值
itemAlias	string	可選值	文件標(biāo)記／別名
authTokenHeader	string	可選值	auth驗證token的請求頭

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

headers: 這里參數(shù)一個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: 是否自動上傳，如果為true，則通過<input type="file"/>選擇完文件后立即自動上傳，為false則需要手工調(diào)用uploader.uploadAll()或者uploader.uploadItem(value: FileItem)方法進行手工上傳。

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

application
image
video
audio
pdf
compress
doc
xls
ppt

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

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);

下面介紹三個常用的事件

2.3.1. onAfterAddingFile

onAfterAddingFile(fileItem: FileItem): any;

觸發(fā)時機：添加一個文件之后的回調(diào)

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

2.3.2. onSuccessItem

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

觸發(fā)時機：上傳一個文件成功后回調(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ā)時機：創(chuàng)建文件之后的回調(diào)，大約是在進行實際的上傳前，這個事件經(jīng)常用來對form進行處理，用以傳遞一些文件以外的業(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ù)信息，方便后臺處理，F(xiàn)ormData類型。

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

2.4.1 input file控件處理

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

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

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

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

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

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

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

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

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

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

<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="">進度</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">錯誤</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ù)錯誤  
 }
 console.info(response+" for "+item.file.name + " status " + status);
}

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

拖拽文件默認(rè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ù)
}

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

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

相關(guān)文章

最新評論

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

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

常用在線小工具