vue实现压缩图片预览并上传功能（promise封装）

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

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

过程大致分为三步：

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

模板：

<template> <div class="image-box">  <input type="file" accept="image/*" @change="imageHandle">  <img ref="upImg"/> </div></template>

获取图片数据

methods: {   //监听input file的change事件  imageHandle(e) {   //**这个是必不可少的，在下面的reader.onload中this就不再指vm了**   let that = this;   let maxSize = 100 * 1024;   let files = e.srcElement.files;   if (!files.length) return; //文件长度大于0   if (!/^image///.test(files[0].type)) return; //必须是图片才处理   if (!window.FileReader) return; //支持FileReader   //创建filereader对象   let reader = new FileReader();   reader.readAsDataURL(files[0]); //将图片转成base64格式   reader.onload = function() {    let result = this.result;    let img = new Image();    img.src = result;    let formdata = new FormData();    if (this.result.length <= maxSize) {     that.$refs.upImg.src = result; //预览图片     img = null;     //上传图片     formdata.append("image", that._upload(result, files[0].name, files[0].type));     that.$store.dispatch("uploadImage", formdata)        .then(data => {          if (data === 1) {          that.$toast("上传成功", "success");          } else if (data === -1) {          that.$toast("图片为空", "error");          } else {          that.$toast("上传失败", "error");          }        })        .catch(error => that.$toast("上传失败", "error"));    } else {     img.onload = function() {      //压缩图片      let data = that._compress(img);      //图片预览      that.$refs.upImg.src = data;      //上传图片      formdata.append("image", that._upload(data, files[0].name, files[0].type));      that.$store.dispatch("uploadImage", formdata)          .then(data => {            if (data === 1) {            that.$toast("上传成功", "success");            } else if (data === -1) {            that.$toast("图片为空", "error");            } else {            that.$toast("上传失败", "error");            }          })          .catch(error => that.$toast("上传失败", "error"));     };    }   };  },

压缩图片

在IOS中，canvas绘制图片是有两个限制的：

首先是图片的大小，如果图片的大小超过两百万像素，图片也是无法绘制到canvas上的，调用drawImage的时候不会报错，但是你用toDataURL获取图片数据的时候获取到的是空的图片数据。