资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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类型的参数：

参数名参数类型是否是可选值参数说明
allowedMimeTypeArray可选值 
allowedFileTypeArray可选值允许上传的文件类型
autoUploadboolean可选值是否自动上传
isHTML5boolean可选值是否是HTML5
filtersArray可选值 
headersArray可选值上传文件的请求头参数
methodstring可选值上传文件的方式
authTokenstring可选值auth验证的token
maxFileSizenumber可选值最大可上传文件的大小
queueLimitnumber可选值 
removeAfterUploadboolean可选值是否在上传完成后从队列中移除
urlstring可选值上传地址
disableMultipartboolean可选值 
itemAliasstring可选值文件标记／别名
authTokenHeaderstring可选值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标签：

复制代码 代码如下:


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

selectedFileOnChanged() {
 // 这里是文件选择完成后的操作处理
}

选择文件默认支持选择单个文件，如需支持文件多选，请在标签中添加multiple属性，即：

复制代码 代码如下:


2.4.2 支持文件多选的实现示例

下面是参考官方示例改造的一个文件多选时的template及相关后台代码的配置示例：


 
 文件上传操作
 
 
 
 
 
 
 
 


 
 上传文件列表
 
 
 
已选文件数量: {{ uploader?.queue?.length }}

 
  
  名称
  保存名
  文件大小
  进度
  状态
  操作
  

  
  {{ item?.file?.name }}
  
  
   {{ item?.file?.size/1024/1024 | number:'.2' }} MB
  

  
   

   

   

  
  
   成功
   未上传
   取消
   错误
  
  
   
   
   
  
  
 
 

@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) {
 // 文件拖拽完成的回调函数
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。


网页名称：Angular4集成ng2-file-upload的上传组件
当前地址：http://cdkjz.cn/article/psidod.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都做网站成都网站运维公路打桩机公司宣传册设计名片印刷厂雕琢时光茶叶小程序开发公司成都企业网站建设四川发电机回收成都服务器机柜租用

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图