Vue 图片压缩并上传至服务器 _图片压缩

日常开发中经常会遇到上传图片的需求，随着手机的蓬勃发展，现在拍出来的照片分辨率越来越高，随之带来的问题就是图片占用空间越来越大，如果我们直接上传图片可能就会浪费很大一笔资源，本文主要讲解基于 Vue + Vant，实现移动端图片选择，并用 Canvas 压缩图片，最后上传至服务器。还会封装一个工具类，方便直接调用。
一、工具类封装先上代码，封装一个 CompressImageUtils 工具类：

文章插图
【Vue 图片压缩并上传至服务器】

文章插图

文章插图

定义的最大宽度和最大高度均为 500，如果图片的宽高至少有一个超出了 500，都会被等比压缩，不用担心变形。可以根据自己项目需要改变maxWidth 和 maxHeight。
这里直接把压缩的最大高度和最大宽度写死为 500 了，没有在调用时传。因为一个项目压缩的逻辑和大小一般都一致的，没必要在每次调用的时候传。当然如果想写的灵活一点，可以在 compressImage 方法里再把 maxWidth 、 maxHeight 和压缩质量船上。
compressImage 方法返回的是 blob 值，根据服务端接口需要可以改为返回 base64，只需将 resolve(blob) 改为 resolve(base64) 即可。
注意一点，对于有些宽高没到 500，且分辨率很小的图片，压缩之后可能比之前还大。猜测可能是 canvas 生成的图片分辨率要比原来高一些，所以最终的图片比压缩前更大。可以在调用的地方加个判断，如果压缩完的大小比原图小，就上传压缩后的图片；如果如果压缩完的大小比原图大，就上传原图。
二、如何使用将 CompressImageUtils 引入到目标文件，然后调用 compressImage 方法，即可在回调里获得压缩后的结果。注意 compressImage 方法返回的是 Promise 。
省略其他无关代码，只保留跟压缩图片和上传相关的：

文章插图

文章插图

在返回结果中加了层判断，压缩后比原来更大，则将原图上传；压缩后比原来小，上传压缩后的。解决压缩后比原图更大的情况。
三、使用效果先上传一个非常大的，尺寸为 6016?×?4016，16.8M 的大图，看输出日志，压缩后大小仅为 260k 左右。此时判断压缩后比压缩前小，上传压缩图到服务器。