vue 上傳圖片，轉base64取不到.onload的值

1、例如：

<1-- 選擇證件圖片 -->
<ul class="upload-imgs">
　　<!-- imgLen 為選擇幾張圖片，當前設置了選擇一張后隱藏選擇按鈕 -->
　　<li v-if="imgLen == 1 ? false : true"> 
 　　　　<input type="file" class="upload" @change="addImg" ref="inputer" multiple accept="image/*"/>
　　　　<a class="add"><img src="../../assets/index_img/shenfenzheng-a.png" alt=""><p>上傳證件正面</p></a>
　　</li>
　　<!-- 回顯圖片 -->
　　<li v-for='(value, key) in imgs' :key="key">
　　　　<div class="img"><img :src="getObjectURL(value)" @click="showImg(value)" /><a class="close" @click="delImg(key)">×</a></div>
　　</li>
</ul>
<!-- 點擊查看大圖 -->
<el-dialog :visible.sync="dialogVisible">
　　<img width="100%" :src="showimgs" alt="">
</el-dialog>

2、添加、顯示、刪除圖片：

添加圖片后：

  

//添加圖片
addImg(event){
　　let inputDOM = this.$refs.inputer;
　　// 通過DOM取文件數據
　　this.fil = inputDOM.files;
　　let oldLen = this.imgLen;
　　let len = this.fil.length + oldLen;
　　for (let i = 0; i < this.fil.length; i++) {
　　　　const isLt5M = this.fil[i].size <  1024 * 1024; //判斷圖片是否大於 1M
　　　　if (!isLt5M) {
　　　　 　　this.$message({
　　　　 　　　　message: '請選擇 1M 以內的圖片!',
　　　　　　 　　type: 'warning'
　　　　　　});
　　　　 　　return false
　　　　}
　　　　this.imgLen++;
　　　　this.$set(this.imgs, this.fil[i].name + '?' + new Date().getTime() + i, this.fil[i]); //添加圖片
　　}
　　for(var i in this.imgs) {
　　　　var img = this.getObjectURL(this.imgs[i]); // blob：http：XXXXX 圖片
　　　　var image = new Image();
　　　　image.src = img;
　　　　image.onload = function() {
　　　　　　var base64 = getBase64Image(image); // blob 轉 base64
　　　　　　this.certificate[0] = base64;  //此處可以成功轉成 base64，但是無法賦值全局變量 this.certificate 
　　　　}
　　}
},
//顯示圖片
showImg(value) {
　　this.showimgs = this.getObjectURL(value);
　　this.dialogVisible = true;
},
//刪除圖片
delImg(key){
　　this.$delete(this.imgs,key);
　　this.imgLen--;
},

3、回顯圖片：

getObjectURL(file) {
　　var url = null ;
　　if (window.createObjectURL != undefined) {
　　　　url = window.createObjectURL(file) ;
　　} else if (window.URL != undefined) {
　　　　url = window.URL.createObjectURL(file) ;
　　} else if (window.webkitURL != undefined) {
　　　　url = window.webkitURL.createObjectURL(file) ;
　　}
　　return url ;
},

4、blob 轉base64：

function getBase64Image(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;
}

5、data：

certificate: [],
imgs: {},
imgLen:0,
showimgs: null,

6、css：

    .form-group{width: 49%;display: inline-block;vertical-align: top;}
    .upload-imgs{overflow: hidden;font-size: 0;width: 100%;height: 175px;}
    .upload-imgs li{position: relative;width: 100%;height: 100%;font-size: 14px;display: inline-block;text-align: center;vertical-align: middle;}
    .upload-imgs .add{display: block;color: #9A9A9A;height: 100%;padding: 8px 0;font-size: 12px;}
    .upload-imgs .add .iconfont{padding: 10px 0;font-size: 40px;}
    .upload-imgs li .upload{position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;opacity:0;cursor: pointer;}
    .upload-imgs .img{position: relative;width: 100%;height: 180px;padding-top: 25px;overflow: hidden;}
    .upload-imgs .img img{vertical-align: middle;background-repeat:no-repeat; background-size: 100% 100%;height: 100%;cursor: pointer;}
    .upload-imgs .img .close{display: none;}
    .upload-imgs li:hover .img .close{display: block;position: absolute;right: 3px;top: 0;line-height: 1;font-size: 22px;color: #aaa;}

7、到第 2 步 var img = this.getObjectURL(this.imgs[i]) ，此時，獲取到的 img 為 blob:http:xxxxxxxx 格式的圖片，用 image.onload 轉成 base64 圖片，發送后端，但是，這里的 this，指向的是這個 function() 函數，不是全局，且 image.onload = function()，其本身無法攜帶任何參數，所以，需要改成 es6 的箭頭函數 image.onload = () =>，即可賦值給全局變量。