在Github上找到了一个支持Angular4好用的文件上传组件ng2-file-upload，这里简单介绍一下这个库的集成使用方案。
本文基于该组件的1.2.1版。
1. 安装
安装非常简单，只要在项目根路径下运行如下npm命令即可:
2. 使用说明
官方的文档写的非常简单，几乎看不出什么来，这里结合实际的使用调试，说明一下基本的配置和使用方案。
2.1. 集成到Module中
在需要使用的Module中需要引入如下两个模块：
2.2. 初始化FileUploader
在对应的使用的Component中，需要引入FileUploader：
然后声明一个FileUploader类型的变量，并将其初始化：
初始化FileUploader需要传入FileUploaderOptions类型的参数：
2.2.1. 关键参数说明
headers: 这里参数一个Array类型，数组内接收的类型为{name: 'headerName',value: 'haederValue'}，例如：
autoUpload: 是否自动上传，如果为true，则通过文件后立即自动上传，为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函数处理对应的绑定函数，如下：
下面介绍三个常用的事件
2.3.1. onAfterAddingFile
onAfterAddingFile(fileItem: FileItem): any;
参数： fileItem - 添加的文件信息，FileItem类型。
2.3.2. onSuccessItem
onSuccessItem(item: FileItem,response: string,status: number,headers: ParsedResponseHeaders): any;
参数：
2.3.3. onBuildItemForm
onBuildItemForm(fileItem: FileItem,form: any): any;
触发时机：创建文件之后的回调，大约是在进行实际的上传前，这个事件经常用来对form进行处理，用以传递一些文件以外的业务相关信息。
例如：
参数：
2.4. Template中文件上传控件处理
2.4.1 input file控件处理
在组件对应的HTML模版中设置input标签：
选择文件默认支持选择单个文件，如需支持文件多选，请在标签中添加multiple属性，即：
下面是参考官方示例改造的一个文件多选时的template及相关后台代码的配置示例：
已选文件数量: {{ uploader?.queue?.length }}
<ion-row *ngFor="let item of uploader.queue">
{{ item?.file?.name }}
// 这里是文件选择完成后的操作处理
}
buildItemForm(fileItem: FileItem,fileItem["realFileName"]);
}
}
afterAddFile(fileItem: FileItem): any{
}
changeFileName(value: any,fileItem: FileItem){
fileItem["realFileName"] = value.target.value;
}
successItem(item: FileItem,headers: ParsedResponseHeaders):any{
// 上传文件成功
if (status == 200) {
// 上传文件后获取服务器返回的数据
let tempRes = JSON.parse(response);
}else {
// 上传文件后获取服务器返回的数据错误
}
console.info(response+" for "+item.file.name + " status " + status);
}
拖拽文件默认支持多文件拖拽。 对块级元素进行设置（这里以div标签为例）：
