vue实现头像上传并实时预览

工作笔记记录

效果图：

HTML部分：

 <div class="head-img">
     <input type="file"  id="upload" style="display:none;" accept="image/gif,image/jpeg,image/png,image/jpg" @change="freshImg"/>
     <div class="border"  @click="uploadIMg">{{headTip}}<img :src="imgsrc" class="imgDiv"></div>
 </div>

JS部分：

 

data(){
　　return {
   　　imgsrc:require('../../assets/img/defaultImg.jpg'),         //用户没有上传图片的默认头像
       headTip: "点击上传头像",
　　}
}
methods:{
　　uploadIMg:function(){
      document.getElementById('upload').click();
  　},        
　　freshImg:function(e){
      let _this = this;
      _this.imgObj = e.target.files['0'];               //得到上传的第一个文件
      let fr = new FileReader();                        //异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
      fr.onload=function(){                             //在读取操作完成时触发
        _this.imgsrc = fr.result;                       // 图片文件赋值给图片标签路径
      }
      fr.readAsDataURL(_this.imgObj);                   //将读取到的文件编码成Data URL
      _this.headTip='';                                 // 清空我的提示
    }
}

注意：

FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。

Data URL是一项特殊的技术，可以将资料（例如图片）内嵌在网页之中，不用放在外部文件。使用Data URL的好处是，不需要额外再发出一个HTTP请求到服务器端取得额外资料

缺点：

　　网页的大小可能会变大，它适合应用在内嵌小图片，不建议将大图像编码成Data URL来使用。图像文件不能超过浏览器限定的大小，否则无法读取图像文件。

 

CSS[LESS]部分

 .head-img {
    text-align: center;
    margin-bottom: 0.2rem;
    .border {
      display: inline-block;
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      border: 1px solid #c3c3c3;
      overflow: hidden;
      line-height: 5rem;
      text-align: center;
        position: relative;
      .imgDiv {
        width: 100%;
        height: 100%;
        position: absolute;
        left:0;
        top:0;
        border-radius:50%;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        z-index: -1;
      }
    }
  }

 感谢myt_Never的博客 更多详细，请看：https://blog.csdn.net/myt_Never/article/details/80106426