转载自：http://www.cnblogs.com/gavin-cn/p/7256852.html
本文基于该组件的1.2.1版。
1. 安装
安装非常简单，只要在项目根路径下运行如下npm命令即可:
官方的文档写的非常简单，几乎看不出什么来，这里结合实际的使用调试，说明一下基本的配置和使用方案。
2.1. 集成到Module中
在需要使用的Module中需要引入如下两个模块：
本文基于该组件的1.2.1版。
安装非常简单，只要在项目根路径下运行如下npm命令即可:
官方的文档写的非常简单，几乎看不出什么来，这里结合实际的使用调试，说明一下基本的配置和使用方案。
在需要使用的Module中需要引入如下两个模块：
在对应的使用的Component中，需要引入FileUploader：
import { FileUploader } from 'ng2-file-upload';
然后声明一个FileUploader类型的变量，并将其初始化：
uploader:FileUploader = new@H_502_16@ FileUploader({
url: commonConfig.baseUrl @H_502_16@+ "/uploadFile",method: @H_502_16@"POST",itemAlias: @H_502_16@"uploadedfile",autoUpload: @H_502_16@false@H_502_16@
});@H_502_16@
初始化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的请求头 |
uploader.uploadAll()或者uploader.uploadItem(value: FileItem)方法进行手工上传。allowedFileType:@H_502_16@这个文件类型并非我们认为的文件后缀，不管选择哪一个值，并不会过滤弹出文件选择时显示的文件类型，只是选择后，非该类型的文件会被过滤掉，例如allowedFileType:["image","xls"],可选值为：
allowedMimeType:@H_502_16@这个是通过Mime类型进行过滤，例如allowedMimeType: ['image/jpeg','image/png' ],跟上面的allowedFileType参数一样，不管选择哪一个值，并不会过滤弹出文件选择时显示的文件类型，只是选择后，非该类型的文件会被过滤掉。
注意基于uploader事件绑定的函数其默认scope为uploader自身，所以如果想在对应的绑定函数中使用其他scope对象，需要使用bind函数处理对应的绑定函数，如下：
下面介绍三个常用的事件
onAfterAddingFile(fileItem: FileItem): any;
选择文件默认支持选择单个文件，如需支持文件多选，请在标签中添加multiple属性，即：
2.4.2 支持文件多选的实现示例@H_502_16@@H_502_16@
下面是参考官方示例改造的一个文件多选时的template及相关后台代码的配置示例：@H_502_16@
@ViewChild('firstInput',{ read: MdInputDirective })
firstInput: MdInputDirective;
@ViewChild(@H_502_16@'fileUpload')
fileUpload: ElementRef;
…
@H_502_16@false@H_502_16@
});
@H_502_16@this@H_502_16@);
@H_502_16@this@H_502_16@.uploader.onAfterAddingFile = this@H_502_16@.afterAddFile;
@H_502_16@this@H_502_16@.buildItemForm;
…
fileSelect(): any{
@H_502_16@this@H_502_16@.fileUpload.nativeElement.click();
}
fileAllUp(): any{
@H_502_16@this@H_502_16@.uploader.uploadAll();
}
fileAllCancel(): any{
@H_502_16@this@H_502_16@.uploader.cancelAll();
}
fileAllDelete(): any{
@H_502_16@this@H_502_16@.uploader.clearQueue();
}
selectedFileOnChanged(event) {
@H_502_16@ 这里是文件选择完成后的操作处理@H_502_16@
}
buildItemForm(fileItem: FileItem,fileItem["realFileName"]);
}
}
afterAddFile(fileItem: FileItem): any{
}
changeFileName(value: any,fileItem: FileItem){
fileItem[@H_502_16@"realFileName"] = value.target.value;
}
successItem(item: FileItem,headers: ParsedResponseHeaders):any{
@H_502_16@ 上传文件成功 @H_502_16@
if@H_502_16@ (status == 200) {
@H_502_16@ 上传文件后获取服务器返回的数据@H_502_16@
let tempRes = JSON.parse(response);
}@H_502_16@else@H_502_16@ {
@H_502_16@ 上传文件后获取服务器返回的数据错误 @H_502_16@
}
console.info(response@H_502_16@+" for "+item.file.name + " status " + status);
}@H_502_16@
拖拽文件默认支持多文件拖拽。
对块级元素进行设置（这里以div标签为例）：
fileOverBase(event) {
@H_502_16@ 拖拽状态改变的回调函数@H_502_16@
}
fileDropOver(event) {
@H_502_16@ 文件拖拽完成的回调函数@H_502_16@
}
