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 = () =>,即可赋值给全局变量。

 

posted @ 2020-10-20 16:40  小蘑菇123  阅读(1172)  评论(0编辑  收藏  举报