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{ 49%;display: inline-block;vertical-align: top;}
    .upload-imgs{overflow: hidden;font-size: 0; 100%;height: 175px;}
    .upload-imgs li{position: relative; 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; 100%;height: 100%;opacity:0;cursor: pointer;}
    .upload-imgs .img{position: relative; 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 = () =>，即可赋值给全局变量。