Angular4集成ng2-file-upload的上傳組件
在Github上找到了一個支持Angular4好用的文件上傳組件ng2-file-upload，這里簡單介紹一下這個庫的集成使用方案。
本文基于該組件的1.2.1版。
1. 安裝
安裝非常簡單，只要在項目根路徑下運行如下npm命令即可:
npm install ng2-file-upload --save
2. 使用說明
官方的文檔寫的非常簡單，幾乎看不出什么來，這里結合實際的使用調試，說明一下基本的配置和使用方案。
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
在對應的使用的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 | 可選值 | 文件標記／別名 |
| authTokenHeader | string | 可選值 | auth驗證token的請求頭 |
2.2.1. 關鍵參數(shù)說明
headers: 這里參數(shù)一個Array類型，數(shù)組內接收的類型為{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則需要手工調用uploader.uploadAll()或者uploader.uploadItem(value: FileItem)方法進行手工上傳。
allowedFileType: 這個文件類型并非我們認為的文件后綴，不管選擇哪一個值，并不會過濾彈出文件選擇時顯示的文件類型，只是選擇后，非該類型的文件會被過濾掉，例如allowedFileType:["image","xls"],可選值為：
- application
- image
- video
- audio
- compress
- doc
- xls
- ppt
allowedMimeType: 這個是通過Mime類型進行過濾，例如allowedMimeType: ['image/jpeg', 'image/png' ],跟上面的allowedFileType參數(shù)一樣，不管選擇哪一個值，并不會過濾彈出文件選擇時顯示的文件類型，只是選擇后，非該類型的文件會被過濾掉。
2.3. FileUploader常用事件綁定
注意基于uploader事件綁定的函數(shù)其默認scope為uploader自身，所以如果想在對應的綁定函數(shù)中使用其他scope對象，需要使用bind函數(shù)處理對應的綁定函數(shù)，如下：
this.uploader.onSuccessItem = this.successItem.bind(this);
下面介紹三個常用的事件
2.3.1. onAfterAddingFile
onAfterAddingFile(fileItem: FileItem): any;
觸發(fā)時機：添加一個文件之后的回調
參數(shù)： fileItem - 添加的文件信息，F(xiàn)ileItem類型。
2.3.2. onSuccessItem
onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
觸發(fā)時機：上傳一個文件成功后回調
參數(shù)：
- item - 上傳成功的文件信息，F(xiàn)ileItem類型；
- response - 上傳成功后服務器的返回信息；
- status - 狀態(tài)碼；
- headers - 上傳成功后服務器的返回的返回頭。
2.3.3. onBuildItemForm
onBuildItemForm(fileItem: FileItem, form: any): any;
觸發(fā)時機：創(chuàng)建文件之后的回調，大約是在進行實際的上傳前，這個事件經(jīng)常用來對form進行處理，用以傳遞一些文件以外的業(yè)務相關信息。
例如：
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 - 表單信息，用來添加文件相關的業(yè)務信息，方便后臺處理，F(xiàn)ormData類型。
2.4. Template中文件上傳控件處理
2.4.1 input file控件處理
在組件對應的HTML模版中設置input標簽：
<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
在組件.ts文件中設置聲明函數(shù)：
selectedFileOnChanged() {
// 這里是文件選擇完成后的操作處理
}
選擇文件默認支持選擇單個文件，如需支持文件多選，請在標簽中添加multiple屬性，即：
<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />
2.4.2 支持文件多選的實現(xiàn)示例
下面是參考官方示例改造的一個文件多選時的template及相關后臺代碼的配置示例：
<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) {
// 上傳文件后獲取服務器返回的數(shù)據(jù)
let tempRes = JSON.parse(response);
}else {
// 上傳文件后獲取服務器返回的數(shù)據(jù)錯誤
}
console.info(response+" for "+item.file.name + " status " + status);
}
2.4.3 文件拖拽上傳實現(xiàn)
拖拽文件默認支持多文件拖拽。
對塊級元素進行設置（這里以div標簽為例）：
<div class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><div>
在組件.ts文件中設置聲明函數(shù)：
fileOverBase(event) {
// 拖拽狀態(tài)改變的回調函數(shù)
}
fileDropOver(event) {
// 文件拖拽完成的回調函數(shù)
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了AngularJS的Cookies讀寫操作,結合實例形式分析了ngCookies模塊與get和put方法進行cookie讀寫操作的相關實現(xiàn)技巧,需要的朋友可以參考下2016-11-11
本篇文章主要介紹了淺談angular2 組件的生命周期鉤子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
AngularJS通過ng-Img-Crop實現(xiàn)頭像截取的示例
本篇文章主要介紹了AngularJS通過ng-Img-Crop實現(xiàn)頭像截取的示例，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了Angular搜索場景中使用rxjs的操作符處理思路,主要的思路就是通過Subject來發(fā)送過濾條件，這樣就可以使用rxjs的各種操作符，可以快捷很多。需要的朋友可以參考下2018-05-05
Angularjs中ng-repeat-start與ng-repeat-end的用法實例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開始先進行了簡單的介紹，而后通過完整的實例代碼詳細給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
angular json對象push到數(shù)組中的方法
下面小編就為大家分享一篇angular json對象push到數(shù)組中的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Angularjs 基礎入門的一些知識,需要的朋友可以參考下2014-12-12
angularjs select 賦值 ng-options配置方法
下面小編就為大家分享一篇angularjs select 賦值 ng-options配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本文給大家總結了一些angularjs的基礎知識及相關示例，分享給大家，希望能對大家有所幫助。2015-01-01
對angularJs中$sce服務安全顯示html文本的實例
今天小編就為大家分享一篇對angularJs中$sce服務安全顯示html文本的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09