vue 图片Base64压缩上传

最近做的一个vue项目，后台要求请求头是application/json格式的，所以我对axios 进行了全局设置了请求头；但是正常上传图片都是application/x-www-form-urlencoded;charset=UTF-8格式的，这样突然出现的from请求就很是尴尬；

对此和后台商量把图片转换成Base64在传过去

let _this = this;
// console.log(e)
var imgFile = e.target.files[0]; // 获取图片文件
var fr = new FileReader();       // 读取文件
fr.onload = function () {        // 图片读取完成后
    _this.imgBase64 = fr.result;			// 读取到的图片路径是Base64的
    var img = document.getElementById('imgDom');    // 获取图片DOM
    setTimeout(function(){                           // 因为获取数据会出现一点数据顺序问题  所以要做一下延迟
        var w = img.naturalWidth;    // 获取Base64图片的原始图片大小
        var h = img.naturalHeight;   
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');    // 创建属性节点
        var anw = document.createAttribute("width"); 
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(img, 0, 0, w, h);
        // .7值越小，所绘制出的图像越模糊
        _this.imgBase64 = canvas.toDataURL('image/jpeg',.7);
    },100);
};

_this.imgBase64 就是压缩后的路径  把这个传给后台就可以了