记录一个vue将读取图片并转成base64位的功能，并封装调用

记录一个vue将读取图片并转成base64位的功能

今天特别郁闷，找了老半天搜到的代码不是少了代码，就是运行炸裂的，烦心的很。

// 页面代码
<input type="file" @change="ClickGetImg">

// 公共代码
ClickGet(e) {
    var image = new Image();
    image.src = window.URL.createObjectURL(e.target.files[0]);
    image.onload = () => {
      var base64Img = this.getBase64Img(image); //这个输出出来后就是base64位的字符串了
     //这里可以写你的文件上传请求
    };
  },
  getBase64Img(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    var dataURL = canvas.toDataURL("image/" + ext);
    return dataURL;
  },

// vue调用
ClickGetImg(e){
    this.$utils.ClickGet(e);  //这里调用封装的方法
}

如果不知道如何封装的小伙伴可以看这里： 记录一个Vue封装公共函数方法的步骤.