前端实现图片压缩上传功能

以移动端为例，在H5上传图片时，由于机型 / 网速 / 流量等限制，在低版本机型上经常会出现上传的图片太大导致上传很慢甚至崩溃的情况，所以需要对在某些情况下需要对上传的图片进行压缩上传。

以下以移动端使用Vue框架为例：

（以下主要实现思路来自张鑫旭大神的博客：?https://www.zhangxinxu.com/wordpress/2017/07/html5-canvas-image-compress-upload/）

 

话不多说进入正题

第一步：使用原生input上传图片

<input type="file" class="file-btn" @change="changeImg($event)" />

上面这句代码中可以发现，我没有指定上传的文件的格式，因为在之前的开发过程中发现，input在设置了accpet=“image/*”之后，在某些低版本安卓机（微信浏览器）上，会出现上传jpeg格式的图片无法触发input的change的事件的情况，所以后来就把input的图片类型去掉了，验证文件类型在change事件触发后处理或者交由后端校验。

 

第二步：将图片利用canvas的drawImage进行按比例重绘

在接收到需要上传的图片之后，我们可以做一些限制操作，比如限制上传图片的大小 / 校验文件的格式等等，这里就不写出来了。直接切入正题：

changeImg(e){
    const imgFile = e.target.files[0];
    con