如何用Vue实现基于Promise封装的压缩图片预览及上传功能？

本文共计1975个文字，预计阅读时间需要8分钟。

原文：本文字例为大师分享了vue实现压缩图片预览并上传的具体代码，供大师参考，具体内容如下：主要用到filereader、canvas以及formData这三个h5的api，过程大致分为三步：用户使用input file上传

改写后：本例展示如何利用vue技术实现图片压缩预览及上传。代码主要涉及filereader、canvas和formData三个h5 API，操作步骤分为三：用户通过input file上传图片。

本文实例为大家分享了vue实现压缩图片预览并上传的具体代码，供大家参考，具体内容如下

主要用到filereader、canvas 以及 formdata 这三个h5的api

过程大致分为三步：

用户使用input file上传图片的时候，用filereader读取用户上传的图片数据（base64格式）
把图片数据传入img对象，然后将img绘制到canvas上，再调用canvas.toDataURL对图片进行压缩
获取到压缩后的base64格式图片数据，转成二进制塞入formdata，再通过XmlHttpRequest提交formdata。