安装非常简单,只要在项目根路径下运行如下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;
触发时机:添加一个文件之后的回调
参数: 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;