# clone the repo
git clone https://github.com/fenglanzhan/angular-components.git
# change into the repo directory
cd angular-components
# install
npm install
# run
ng serve
公司内有几个app经常会用到图片上传的功能，类似于咸鱼的产品发布。
关于图片，有一些基础知识在这里整理一下。
- FormData对象：可以将数据以键值对的形式，通过ajax请求发送给服务器，是常见的移动端上传方式。在移动端兼容性非常不错。
- base64格式：也就是用一段字符串描述二进制数据
- Blob对象：一个二进制对象，原生支持，XHR level2支持Blob对象
- FileReader对象：可以将本地文件转换成base64格式的dataUrl；可以使用File或者Blob对象指定要读取的文件或数据
图片压缩的实现是将图片用canvas画出来，使用canvas.toDataUrl方法将图片转化成base64格式，利用此方法设置导出图像的质量进行压缩
- 使用input获取文件file
- 将file转换成dataUrl，即base64格式
- 然后用canvas绘制图片进行压缩，生成新的dataUrl
- 将dataUrl转化成Blob(可以试试canvas.toBlob方法)
- 将数据添加到FormData对象中
- 通过XHR上传
在移动端，图库和拍照选择图片是基于ionic native的插件实现的，直接转化成base64格式的图片
一个Promise的坑：测试时，发现在使用promise来实现异步回调时，异步代码的运行时错误无法被自动 reject 进而被 catch 捕获，而是直接报错
不过这里用了img的onerror事件监听，还是可以避免的。
待优化点：
- 多张上传
- 根据具体业务来说，我们做的并不是工具类的开发，所以图片上传的数量不会很多。基于此，可以限定每次选取的最大张数，比如3张，多张并发上传，性能方面应该还是可以的
- 如果要实现多图(多余3张)上传，还没有思路
- 兼容性问题：因为主要做Hybrid APP，所以在兼容性方面没有考虑那么多，后来查can i use，发现兼容性的问题还挺麻烦的，框架拖多了，技术渣的不行。。。