简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

Angular4整合ng2-file-upload的上傳元件

亚连
發布： 2018-05-30 11:16:27
原創
2601 人瀏覽過

本篇文章主要介紹了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#allowedFileTypeArray#可選值#允許上傳的檔案類型##boolean可選值是否自動上傳#isHTML5boolean可選值是否是HTML5filters#Array可選值# headersArray可選值已上傳檔案的請求頭參數methodstring可選值上傳檔案的方式#authTokenstring可選值auth驗證的tokenmaxFileSizenumber
#參數名稱 #參數說明
可選值 
##autoUpload
##選用值最大可上傳檔案的大小
queueLimitnumber可選值 
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，则通过选择完文件后立即自动上传，为false则需要手工调用uploader.uploadAll()或者uploader.uploadItem(value: FileItem)方法进行手工上传。

allowedFileType: 这个文件类型并非我们认为的文件后缀，不管选择哪一个值，并不会过滤弹出文件选择时显示的文件类型，只是选择后，非该类型的文件会被过滤掉，例如allowedFileType:["image","xls"],可选值为：

  1. application

  2. image

  3. video

  4. audio

  5. pdf

  6. compress

  7. doc

  8. xls

  9. 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;

触发时机：添加一个文件之后的回调

参数： fileItem - 添加的文件信息，FileItem类型。

2.3.2. onSuccessItem

onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;

触发时机：上传一个文件成功后回调

参数：

  1. item - 上传成功的文件信息，FileItem类型；

  2. response - 上传成功后服务器的返回信息；

  3. status - 状态码；

  4. headers - 上传成功后服务器的返回的返回头。

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"]);
 }
}
登入後複製

参数：

  1. fileItem - 要上传的文件信息，FileItem类型；

  2. form - 表单信息，用来添加文件相关的业务信息，方便后台处理，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="">状态</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:&#39;.2&#39; }} MB</span>
  </ion-col>

  <ion-col col-2>
   <p class="progress" style="margin-bottom: 0; height: 70%; width: 90%">
   <p class="progress-bar" style="margin-bottom: 0; height: 100%; background-color: red" role="progressbar" [ngStyle]="{ &#39;width&#39;: item.progress + &#39;%&#39; }"></p>
   </p>
  </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(&#39;firstInput&#39;, { read: MdInputDirective })
firstInput: MdInputDirective;
@ViewChild(&#39;fileUpload&#39;)
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 文件拖拽上传实现

拖拽文件默认支持多文件拖拽。
对块级元素进行设置（这里以p标签为例）：

<p class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><p>
登入後複製

在组件.ts文件中设置声明函数：

fileOverBase(event) {
 // 拖拽状态改变的回调函数
}
fileDropOver(event) {
 // 文件拖拽完成的回调函数
}
登入後複製

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

js中apply和Math.max()函数的问题及区别介绍

浅谈Vue内置component组件的应用场景

vue2中使用less简易教程

以上是Angular4整合ng2-file-upload的上傳元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
組件
來源：php.cn
上一篇：nodejs acl的使用者權限管理詳解 下一篇：使用JS進行對table表格內列內容即時搜尋篩選
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
增加 Apache 設定中的檔案上傳大小 大家好！我在這個配置問題上苦苦掙扎，因為我試圖增加Apache配置中的檔案上傳大小容量，但不知道如何準確地做到這一點。我發現這篇文章討論了這一點，但想知道更改.htaccess的正...
來自於 2023-11-11 11:00:33
0
1
287
javascript - upload上傳圖片，點選同一張圖片太快，提示the file named is already in the queue upload上傳圖片，點選同一張圖片太快，提示the file named is already in the queue，如何解決？ ？
來自於 2017-06-19 09:07:52
0
1
967
javascript - jQuery-File-Upload相容IE8的問題：上傳檔案無法收到response 先給出此問題相關的程式碼:下面的程式碼，我已經成功相容了IE9+,但是沒能成功IE8 {程式碼...} 我遇到的問題不是所謂的返回JSON數據，IE瀏覽器提升下載的問題，這個問題我...
來自於 2017-06-12 09:31:48
0
1
1129
javascript - 關於jQuery File Upload這個插件的問題 使用者使用input="file"標籤選擇圖片，我將使用者選擇的圖片繪製到canvas處理後，得到base64的圖片數據，然後問題來了，我怎麼將這個結果放到jQ...
來自於 2017-06-10 09:49:07
0
1
432
javascript - 拖曳資料夾上傳如何過濾掉資料夾內隱藏的文件 在使用jQuery-File-Upload外掛時可以拖曳檔案或資料夾進行上傳，拖曳資料夾上傳時預設把所有檔案（包括隱藏的檔案）一併上傳了，但是需求要求是不上傳隱藏的檔案。例如，這個...
來自於 2017-05-19 10:44:58
0
1
492
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！