vue 圖片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);
};