图片上传

包括前端的图片预览、剪裁、上传等及 Node.js 后端对图片的保存，实现整个图片上传逻辑。

知识点

服务端

服务端使用了 Express 4，该版本使用 body-parser 无法处理上传的文件。所以，这里使用了 multiparty 处理图片上传的问题。

图片上传后，需要对图片进行一定的处理，如：压缩、剪裁等，使用的是 Sharp。

前端

图片上传前的预览利用了 HTML5 FileReader，读取用户选择要上传的图片，不过该 API 存在兼容性的问题。

图片上传进度利用了 XMLHttpRequest 中的 onprogress 事件，通过 Event 参数中的 loaded 和 total 计算上传百分比。

如何测试

1.克隆仓库并安装依赖

$ git clone https://github.com/hezhii/image-upload.git
$ cd image-upload
$ npm install

2.启动服务

$ npm start

服务默认监听 8080 端口，打开浏览器访问 http://localhost:8080 即可进行测试。