Angular2 ng2-file-upload使用FileReader在网页中显示用户选择图片

ng2-file-upload是一个angular2的文件上传指令插件，可支持拖拽上传、单选上传、多选上传等功能，具体使用方法可去github查看。地址：https://github.com/valor-software/ng2-file-upload

FileReader是什么？

FileReader是一个可操作文件的web api，可以将用户选择的文件转行成所需格式的接口，例如二进制数据、Base64格式数据等。具体详情功能以及浏览器支持可查看Mozilla开发者中心。地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
在这里我们就需要把图片数据装换成Base64格式数据，直接插入img标签的src属性中。

FileReader.readAsDataURL(file)参数怎么获得

在这里我们可以直接使用插件所实例化的FileUploader对象取得用户上传的原始file对象。插件使用方法直接查看原文档。

注意：当使用插件在file_input change方法中获得FileUploader对象后，是无法直接访问JS原始File对象的，原始File对象存储在FileUploader的some属性中，但是这个属性是私有的，所以必须手动去修改一下插件的源码，将some属性的protected删掉。

我这里只使用到了单独上传的功能，因此我在file-item.class.d.ts中删除了对应字段的protected。

在view中插入对应的src即可

例如我这里的component所示，因为我是将用户每一次选择的图片都生成示例显示在页面中所以我使用数组去显示。

页面效果

这样不需要上传文件，也可以直接展示图片。

注意：使用这种方法时一定要考虑到浏览器是否支持FileReader接口，我这里是因为是一个后台使用到，不需要考虑除chrome外其他的浏览器，因此我可以直接使用。