vue上传头像显示在页面中base64

酷酷的旭

于 2018-11-19 15:50:23 发布

阅读量5.9k

点赞数 1

分类专栏： vue 文章标签： vue上传头像上传头像显示到页面上上传图片立即显示到页面上上传头像图片立即显示到页面上上传图片显示到页面上

本文链接：https://blog.csdn.net/weixin_43195512/article/details/84253759

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

body部分

<img src="" style="height: 60px; width: 60px;" id="portrait">
      <div class="logo">
        点击上传头像        
        <input type="file" class="shangchuan" id="saveImage">
      </div>

methods部分

  great: function() {
      document.getElementById("saveImage").onchange = function() {
        console.log(1);
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function() {
          document.getElementById("portrait").src = fr.result;
          this.src = fr.result;
           console.log(this.src)
        };
        fr.readAsDataURL(imgFile);
        console.log(imgFile)
      };
    },

mouted调用

 mounted: function() {
    this.$nextTick(function() {
      // Code that will run only after the
      // entire view has been rendered
      this.great();
    });
  },