web 文件上传方法分享，只用了需求需要的功能，其他的需求请查看参考文档。

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
});

2.2. FileUploader使用，

下面方法也可以写在初始化中。目前用的是这三种方法

  this.uploader.onSuccessItem = function(item: FileItem, response: string, status: number){// 上传文件成功if (status === 200) {// 上传文件后获取服务器返回的数据alert("上传成功");}else {// 上传文件后获取服务器返回的数据错误alert("上传失败");}}.bind(this);//this根据自己的需求this.uploader.onErrorItem = function (item: FileItem, response: string, status: number){alert("上传失败");};this.uploader.onAfterAddingFile = function(files: FileItem){const filename = files.file.name;//还有其他属性，可自行查看that.uploader.uploadItem(files);//可在其他地方调用}.bind(that);//that根据自己的需求

简单示例

html:

            <div class="form-group"><label class="col-md-3 control-label">选择导入文件：</label><div class="col-md-8"><input type="text" class="form-control" id="filename" readonly/></div><div class="col-md-1"><button class="btn btn-sm btn-default"  (click)='uploads()'>浏览</button><input type="file" id="file" style="display: none" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple/></div></div><button type="button" class="btn blue"  (click)='certImport()'>确定</button>

ts:

 uploads():void{this.fileSize = 0;$("#file").click();}selectedFileOnChanged(event) {// 这里是文件选择完成后的操作处理this.fileItem = event;let fileName = "";let fileSize = 0;for(let i = 0;i<event.target.files.length;i++){fileName+= event.target.files[i].name + ";";fileSize +=  event.target.files[i].size;}$("#filename").val(fileName);}certImport():any{if( $("#filename").val() === ""){alert("请选择导入文件");return;}const size = this.fileSize/1024/1024;if(size>10){//判断文件 大小不能 超过10Malert("文件过大,请重新选择文件");return;}//上传文件that.uploader.uploadAll();}

文件功能是 可上传文件的，可选择单个 和多个。

更多属性和方法，可参考参考文档说明。

参考文档：
1. https://www.cnblogs.com/gavin-cn/p/7256852.html

2. http://fex.baidu.com/webuploader/doc/

3.https://www.cnblogs.com/xfdmb/p/6284899.html