Angular4集成ng2-file-upload的上傳組件
在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. 使用說(shuō)明
官方的文檔寫(xiě)的非常簡(jiǎn)單，幾乎看不出什么來(lái)，這里結(jié)合實(shí)際的使用調(diào)試，說(shuō)明一下基本的配置和使用方案。
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類(lèi)型的變量，并將其初始化：
uploader:FileUploader = new FileUploader({
url: commonConfig.baseUrl + "/uploadFile",
method: "POST",
itemAlias: "uploadedfile",
autoUpload: false
});
初始化FileUploader需要傳入FileUploaderOptions類(lèi)型的參數(shù)：
| 參數(shù)名 | 參數(shù)類(lèi)型 | 是否是可選值 | 參數(shù)說(shuō)明 |
|---|---|---|---|
| allowedMimeType | Array | 可選值 | |
| allowedFileType | Array | 可選值 | 允許上傳的文件類(lèi)型 |
| 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ù)說(shuō)明
headers: 這里參數(shù)一個(gè)Array類(lèi)型，數(shù)組內(nèi)接收的類(lè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，則通過(guò)<input type="file"/>選擇完文件后立即自動(dòng)上傳，為false則需要手工調(diào)用uploader.uploadAll()或者uploader.uploadItem(value: FileItem)方法進(jìn)行手工上傳。
allowedFileType: 這個(gè)文件類(lèi)型并非我們認(rèn)為的文件后綴，不管選擇哪一個(gè)值，并不會(huì)過(guò)濾彈出文件選擇時(shí)顯示的文件類(lèi)型，只是選擇后，非該類(lèi)型的文件會(huì)被過(guò)濾掉，例如allowedFileType:["image","xls"],可選值為：
- application
- image
- video
- audio
- compress
- doc
- xls
- ppt
allowedMimeType: 這個(gè)是通過(guò)Mime類(lèi)型進(jìn)行過(guò)濾，例如allowedMimeType: ['image/jpeg', 'image/png' ],跟上面的allowedFileType參數(shù)一樣，不管選擇哪一個(gè)值，并不會(huì)過(guò)濾彈出文件選擇時(shí)顯示的文件類(lèi)型，只是選擇后，非該類(lèi)型的文件會(huì)被過(guò)濾掉。
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類(lèi)型。
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類(lèi)型；
- 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)常用來(lái)對(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類(lèi)型；
- form - 表單信息，用來(lái)添加文件相關(guān)的業(yè)務(wù)信息，方便后臺(tái)處理，F(xiàn)ormData類(lèi)型。
2.4. Template中文件上傳控件處理
2.4.1 input file控件處理
在組件對(duì)應(yīng)的HTML模版中設(shè)置input標(biāo)簽：
<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
在組件.ts文件中設(shè)置聲明函數(shù)：
selectedFileOnChanged() {
// 這里是文件選擇完成后的操作處理
}
選擇文件默認(rèn)支持選擇單個(gè)文件，如需支持文件多選，請(qǐng)?jiān)跇?biāo)簽中添加multiple屬性，即：
<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="">名稱(chēng)</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)簽為例）：
<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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了AngularJS中下拉框的基本用法,結(jié)合具體實(shí)例形式分析了AngularJS下拉框的元素綁定、選中及顯示等功能實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法,結(jié)合實(shí)例形式分析了AngularJS動(dòng)態(tài)編輯構(gòu)建模板的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
AngularJS中的$watch()，$digest()和$apply()區(qū)分
這篇文章主要介紹了AngularJS中的$watch()，$digest()和$apply()區(qū)分，感興趣的朋友可以參考一下2016-04-04
AngularJS實(shí)現(xiàn)ajax請(qǐng)求的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)ajax請(qǐng)求的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)ajax請(qǐng)求的前端界面、ajax交互及后臺(tái)php處理技巧,需要的朋友可以參考下2016-11-11
Angular 理解module和injector，即依賴(lài)注入
本文主要介紹Angular 理解module和injector的知識(shí)，這里整理了相關(guān)知識(shí)，并詳細(xì)介紹了依賴(lài)注入的問(wèn)題，有興趣的小伙伴可以參考下2016-09-09
AngularJs Injecting Services Into Controllers詳解
本文主要介紹AngularJs Injecting Services Into Controllers的知識(shí),這里整理了一下相關(guān)資料，及示例代碼，幫助大家學(xué)習(xí)和理解，有興趣的小伙伴可以參考下2016-09-09
簡(jiǎn)單談?wù)凙ngular中的獨(dú)立組件的使用
這篇文章主要介紹了簡(jiǎn)單談?wù)凙ngular中的獨(dú)立組件的使用的相關(guān)資料,通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，需要的朋友可以參考下2022-08-08
利用angularjs1.4制作的簡(jiǎn)易滑動(dòng)門(mén)效果
本文主要介紹了利用angularjs1.4制作的簡(jiǎn)易滑動(dòng)門(mén)效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
angularjs 指令實(shí)現(xiàn)自定義滾動(dòng)條效果
橫向商品欄,把原有的滾動(dòng)條改成自定義的樣式,并且給兩邊加上箭頭可以調(diào)整,可以拖動(dòng)商品和滾輪實(shí)現(xiàn)滾動(dòng)條效果,這篇文章主要介紹了angularjs 指令實(shí)現(xiàn)自定義滾動(dòng)條效果,需要的朋友可以參考下2024-03-03
angularjs結(jié)合html5實(shí)現(xiàn)拖拽功能
本篇文章給大家分享了angularjs結(jié)合html5實(shí)現(xiàn)拖拽功能的方法以及代碼實(shí)例，有興趣的朋友參考下。2018-06-06