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類型的參數：
| 參數名 | 參數類型 | 是否是可選值 | 參數說明 |
|---|---|---|---|
| allowedMimeType | Array | 可選值 | |
| allowedFileType | Array | 可選值 | 允許上傳的文件類型 |
| autoUpload | boolean | 可選值 | 是否自動上傳 |
| isHTML5 | boolean | 可選值 | 是否是HTML5 |
| filters | Array | 可選值 | |
| headers | Array | 可選值 | 上傳文件的請求頭參數 |
| 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. 關鍵參數說明
headers: 這里參數一個Array類型，數組內接收的類型為{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參數一樣，不管選擇哪一個值，并不會過濾彈出文件選擇時顯示的文件類型，只是選擇后，非該類型的文件會被過濾掉。
2.3. FileUploader常用事件綁定
注意基于uploader事件綁定的函數其默認scope為uploader自身，所以如果想在對應的綁定函數中使用其他scope對象，需要使用bind函數處理對應的綁定函數，如下：
this.uploader.onSuccessItem = this.successItem.bind(this);
下面介紹三個常用的事件
2.3.1. onAfterAddingFile
onAfterAddingFile(fileItem: FileItem): any;
觸發(fā)時機：添加一個文件之后的回調
參數： fileItem - 添加的文件信息，FileItem類型。
2.3.2. onSuccessItem
onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
觸發(fā)時機：上傳一個文件成功后回調
參數：
- item - 上傳成功的文件信息，FileItem類型；
- response - 上傳成功后服務器的返回信息；
- status - 狀態(tài)碼；
- headers - 上傳成功后服務器的返回的返回頭。
2.3.3. onBuildItemForm
onBuildItemForm(fileItem: FileItem, form: any): any;
觸發(fā)時機：創(chuàng)建文件之后的回調，大約是在進行實際的上傳前，這個事件經常用來對form進行處理，用以傳遞一些文件以外的業(yè)務相關信息。
例如：
this.uploader.onBuildItemForm = this.buildItemForm;
…
buildItemForm(fileItem: FileItem, form: any): any{
if(!!fileItem["realFileName"]){
form.append("fileName",fileItem["realFileName"]);
}
}
參數：
- fileItem - 要上傳的文件信息，FileItem類型；
- form - 表單信息，用來添加文件相關的業(yè)務信息，方便后臺處理，FormData類型。
2.4. Template中文件上傳控件處理
2.4.1 input file控件處理
在組件對應的HTML模版中設置input標簽：
<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
在組件.ts文件中設置聲明函數：
selectedFileOnChanged() {
// 這里是文件選擇完成后的操作處理
}
選擇文件默認支持選擇單個文件，如需支持文件多選，請在標簽中添加multiple屬性，即：
<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />
2.4.2 支持文件多選的實現示例
下面是參考官方示例改造的一個文件多選時的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>已選文件數量: {{ 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) {
// 上傳文件后獲取服務器返回的數據
let tempRes = JSON.parse(response);
}else {
// 上傳文件后獲取服務器返回的數據錯誤
}
console.info(response+" for "+item.file.name + " status " + status);
}
2.4.3 文件拖拽上傳實現
拖拽文件默認支持多文件拖拽。
對塊級元素進行設置（這里以div標簽為例）：
<div class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><div>
在組件.ts文件中設置聲明函數：
fileOverBase(event) {
// 拖拽狀態(tài)改變的回調函數
}
fileDropOver(event) {
// 文件拖拽完成的回調函數
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了AngularJS中下拉框的基本用法,結合具體實例形式分析了AngularJS下拉框的元素綁定、選中及顯示等功能實現方法,需要的朋友可以參考下2017-10-10
AngularJS實現動態(tài)編譯添加到dom中的方法
這篇文章主要介紹了AngularJS實現動態(tài)編譯添加到dom中的方法,結合實例形式分析了AngularJS動態(tài)編輯構建模板的相關操作技巧,需要的朋友可以參考下2016-11-11
AngularJS中的$watch()，$digest()和$apply()區(qū)分
這篇文章主要介紹了AngularJS中的$watch()，$digest()和$apply()區(qū)分，感興趣的朋友可以參考一下2016-04-04
這篇文章主要介紹了AngularJS實現ajax請求的方法,結合實例形式分析了AngularJS實現ajax請求的前端界面、ajax交互及后臺php處理技巧,需要的朋友可以參考下2016-11-11
Angular 理解module和injector，即依賴注入
本文主要介紹Angular 理解module和injector的知識，這里整理了相關知識，并詳細介紹了依賴注入的問題，有興趣的小伙伴可以參考下2016-09-09
AngularJs Injecting Services Into Controllers詳解
本文主要介紹AngularJs Injecting Services Into Controllers的知識,這里整理了一下相關資料，及示例代碼，幫助大家學習和理解，有興趣的小伙伴可以參考下2016-09-09
這篇文章主要介紹了簡單談談Angular中的獨立組件的使用的相關資料,通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，需要的朋友可以參考下2022-08-08
本文主要介紹了利用angularjs1.4制作的簡易滑動門效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
橫向商品欄,把原有的滾動條改成自定義的樣式,并且給兩邊加上箭頭可以調整,可以拖動商品和滾輪實現滾動條效果,這篇文章主要介紹了angularjs 指令實現自定義滾動條效果,需要的朋友可以參考下2024-03-03
本篇文章給大家分享了angularjs結合html5實現拖拽功能的方法以及代碼實例，有興趣的朋友參考下。2018-06-06