溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-08-31 11:15:22 來源：腳本之家 閱讀：186 作者：gavin 欄目：web開發(fā)

在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"],可選值為：

  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自身，所以如果想在對(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ù)：

  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)常用來對(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ù)：

  1. fileItem - 要上傳的文件信息，F(xiàn)ileItem類型；
  2. 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" >
   <div class="progress-bar"  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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手