码迷,mamicode.com
首页 > 其他好文 > 详细

Angular4集成ng2-file-upload

时间:2017-07-29 17:39:12      阅读:10998      评论:0      收藏:0      [点我收藏+]

标签:xls   opp   标签   data-   函数   alias   业务   code   包含   


在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,则通过选择完文件后立即自动上传,为false则需要手工调用uploader.uploadAll()或者uploader.uploadItem(value: FileItem)方法进行手工上传。
  • allowedFileType: 这个文件类型并非我们认为的文件后缀,不管选择哪一个值,并不会过滤弹出文件选择时显示的文件类型,只是选择后,非该类型的文件会被过滤掉,例如allowedFileType:["image","xls"],可选值为:

    • application
    • image
    • video
    • audio
    • pdf
    • 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;

  • 触发时机:添加一个文件之后的回调
  • 参数:
    • fileItem - 添加的文件信息,FileItem类型。

2.3.2. onSuccessItem

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

  • 触发时机:上传一个文件成功后回调
  • 参数:
    • item - 上传成功的文件信息,FileItem类型;
    • response - 上传成功后服务器的返回信息;
    • status - 状态码;
    • 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"]);
  }
}
  • 参数:
  • fileItem - 要上传的文件信息,FileItem类型;
  • 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:‘.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);
}

一下内容引用自参考文件Angular2使用ng2-file-upload上传文件

2.4.3 文件拖拽上传实现

拖拽文件默认支持多文件拖拽。
对块级元素进行设置(这里以div标签为例):

<div class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><div>

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

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

3. FileUploader详解

FileUploaderng2-file-upload最主要的部件,里面包含了所有对文件的处理。

3.1. 属性详解

  • isUploading:[boolean] 是否正在上传文件中。
  • queue:[array] 已经拖拽或选择的所有文件。
  • progress:[number] 所有的上传文件的整体进度。
  • options:[FileUploaderOptions] 上传文件的配置信息,前面已经介绍过。

3.2. 方法详解

  • setOptions(options: FileUploaderOptions): void;
    设置上传文件的配置信息。
  • addToQueue(files: File[], options?: FileUploaderOptions, filters?: FilterFunction[] | string): void;
    手动添加文件到FileUploader的上传队列中。
  • removeFromQueue(value: FileItem): void;
    从FileUploader的上传队列中移除指定文件。
  • clearQueue(): void;
    清除FileUploader上传队列中的所有文件。
  • uploadItem(value: FileItem): void;
    上传指定文件。
  • cancelItem(value: FileItem): void;
    取消指定文件的上传。
  • uploadAll(): void;
    上传FileUploader的上传队列中的所有文件。
  • cancelAll(): void;
    取消FileUploader的上传队列中的所有文件的上传。
  • isFile(value: any): boolean;
    判断是否是文件。
  • getIndexOfItem(value: any): number;
    获取文件在FileUploader上传队列中的位置。
  • getNotUploadedItems(): Array;
    获取FileUploader上传队列中的所有未上传的文件。
  • getReadyItems(): Array;
    获取FileUploader上传队列中的所有准备上传的文件。
  • destroy(): void;
    销毁FileUploader实例。

3.3. 监听详解

  • onAfterAddingAll(fileItems: any): any;
    添加完所有文件之后的回调
    参数:
    • fileItems - 添加的文件的数组
  • onBuildItemForm(fileItem: FileItem, form: any): any;
    创建文件之后的回调
    参数:
    • fileItem - 创建的文件
    • form - 添加的方式
  • onAfterAddingFile(fileItem: FileItem): any;
    添加一个文件之后的回调
    参数:
    • fileItem - 添加的文件
  • onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any): any;
    添加文件失败的回调
    参数:
    • item -
    • filter -
    • options -
  • onBeforeUploadItem(fileItem: FileItem): any;
    要上传文件之前的回调
    参数:
    • fileItem - 将要上传的文件
  • onProgressItem(fileItem: FileItem, progress: any): any;
    上传文件的进度(开始上传后调用非常频繁)
    参数:
    • fileItem - 正在上传的文件
    • progress - 该文件的上传进度
  • onProgressAll(progress: any): any;
    整体的上传进度的回调(开始上传后调用非常频繁)
    参数:
    • progress - 整体的上传文件的进度
  • onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
    上传一个文件成功的回调
    参数:
    • item - 上传成功的文件
    • response - 上传成功后服务器的返回
    • status - 状态码
    • headers - 上传成功后服务器的返回的返回头
  • onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
    上传一个文件错误的回调
    参数:
    • item - 上传错误的文件
    • response - 返回的错误
    • status - 状态码
    • headers - 返回的错误返回头
  • onCancelItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
    取消上传一个文件的回调
    参数:
    • item - 取消上传的文件
    • response - 取消的返回信息
    • status - 状态码
    • headers - 取消的返回信息的返回头
  • onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
    完成上传一个文件的回调
    参数:
    • item - 上传成功的文件
    • response - 上传成功后服务器的返回
    • status - 状态码
    • headers - 上传成功后服务器的返回的返回头
  • onCompleteAll(): any;
    完成上传所有文件的回调

4. FileItem详解

FileItemFileUploaderqueue属性的元素类型,在FileUploader中存储的文件的基本类型。

4.1. 属性详解

  • alias [string] : 上传的标志/别名。
  • url [string] : 地址。
  • method [string] : 上传的方法。
  • headers [any] : 上传的头部参数。
  • withCredentials: [boolean] : 是否使用证书。
  • formData [any] : 格式化数据?
  • isReady [boolean] : 是否准备上传(是否可以上传)。
  • isUploading [boolean] : 是否正在上传。
  • isUploaded [boolean] : 是否已经上传过。
  • isSuccess [boolean] : 是否上传成功。
  • isCancel [boolean] : 是否取消上传。
  • isError [boolean] : 是否上传错误。
  • progress [number] : 上传进度。
  • index [number] : 在队列中的位置。

4.2. 方法详解

  • upload(): void;
    开始上传这个文件。
  • cancel(): void;
    取消上传这个文件。
  • remove(): void;
    将这个文件从上传队列中移除。

4.3. 监听详解

  • onBeforeUpload(): void;
    开始上传之前的回调函数。
  • onBuildForm(form: any): any;
    创建文件的回调函数。
    参数:
    • form - 文件来源。
  • onProgress(progress: number): any;
    上传文件的进度回调函数。
    参数:
    • progress - 上传文件的进度。
  • onSuccess(response: string, status: number, headers: ParsedResponseHeaders): any;
    上传文件成功的回调函数。
    参数:
    • response - 成功后的回调数据
    • status - 状态码
    • headers - 回调数据的返回头
  • onError(response: string, status: number, headers: ParsedResponseHeaders): any;
    上传文件错误的回调函数。
  • onCancel(response: string, status: number, headers: ParsedResponseHeaders): any;
    取消上传的回调函数。
  • onComplete(response: string, status: number, headers: ParsedResponseHeaders): any;
    上传文件完成的回调函数。

参考:
Angular2使用ng2-file-upload上传文件

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">





Angular4集成ng2-file-upload

标签:xls   opp   标签   data-   函数   alias   业务   code   包含   

原文地址:http://www.cnblogs.com/gavin-cn/p/7256852.html

(2)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!