结合Vue.js的前端压缩图片方案

这是一个很简单的方案。嗯，是真的。

为何要这么作？

在移动Web蓬勃发展的今天，有太多太多的应用须要让用户在移动Web上传图片文件了，正因如此，咱们有些困难必须去攻克：

1. 低网速下上传进度缓慢，用户体验差

2. 高并发下，后台处理较大的上传文件压力大

3. 或许有更多...

在攻克上面的一些困难时，咱们也能够给本身一些疑问：

1. 真的有必要保存用户上传的原图吗？

2. 用户还能等多久？

3. 或许还有更多...

结合上面的一些困难和疑问，再结合咱们实际的案例，咱们或许能够这样作 —— 在用户上传图片时，图片被提交到后台以前，就对图片进行压缩处理。图片文件大小减少后，上传速度天然会提高，在一样的并发下，后台处理的速度也会获得提高，用户体验获得提高。

有童鞋可能会说，为何不使用一些主流CDN的表单功能，直接把文件上传到CDN去？固然，彻底能够选择那种方案，我只是在众多的方案中选择了一个来用而已，又或者说这是程序员的天性？

准备

上面已经说了 “在用户上传图片时，图片被提交到后台以前，就对图片进行压缩处理。”，那咱们立刻准备下各类工具吧：

1. localResizeIMG（核心，用于在前端对图片进行压缩）

2. Vue.js（处理前端的数据，展示逻辑）

3. Bootstrap（还要我多说？）

怎么作？

1. 上传项目变动后，使用localResizeIMG进行压缩

2. 把数据经过本身指望的方式提交到后台

localResizeIMG在调用时，就能够指定压缩后图片的宽度高度以及质量（详细参考文档），至于要怎么把数据提交到后台，能够参考该库的wiki中提到的方案，一切都很简单。

演示地址
这个例子的仓库地址

本文的解决方法并非惟一，也不必定是最好，在使用相关的框架/库时遇到的问题，能够去相应的Github仓库查看issue或者wiki。