溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在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"],可選值為：
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;
觸發時機：添加一個文件之后的回調
參數： fileItem - 添加的文件信息，FileItem類型。
2.3.2. onSuccessItem
onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
觸發時機：上傳一個文件成功后回調
參數：
2.3.3. onBuildItemForm
onBuildItemForm(fileItem: FileItem, form: any): any;
觸發時機：創建文件之后的回調，大約是在進行實際的上傳前，這個事件經常用來對form進行處理，用以傳遞一些文件以外的業務相關信息。
例如：
this.uploader.onBuildItemForm = this.buildItemForm;
…
buildItemForm(fileItem: FileItem, form: any): any{
if(!!fileItem["realFileName"]){
form.append("fileName",fileItem["realFileName"]);
}
}
參數：
2.4. Template中文件上傳控件處理
2.4.1 input file控件處理
在組件對應的HTML模版中設置input標簽：
在組件.ts文件中設置聲明函數：
selectedFileOnChanged() {
// 這里是文件選擇完成后的操作處理
}
選擇文件默認支持選擇單個文件，如需支持文件多選，請在標簽中添加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="">狀態</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">錯誤</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標簽為例）：
在組件.ts文件中設置聲明函數：
fileOverBase(event) {
// 拖拽狀態改變的回調函數
}
fileDropOver(event) {
// 文件拖拽完成的回調函數
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
