上传图片。没有后台

             

 

 

        <div class="portrait">
          <input id="file" type="file" accept="image/*" @change="changeportrait">
          <!-- <img :src="portraitimg" alt=""> -->
          <img src="" alt="">
        </div>

    // 上传头像
    changeportrait(){
      var reads= new FileReader(),
      f=document.getElementById('file').files[0]
      reads.readAsDataURL(f);
      reads.onload=function (e) {
        $('.portrait img')[0].src = this.result
        if($('.portrait img')[0].src != null){
          $('.portrait p').css('display','none')
        }
      };
    },

/* 头像 */
.content-top {
    height: 150px;  
}
.content-top .portrait {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    border-radius: 50%;
    background-color: #ccc;
    border: 1px solid #fff;
    position: relative;
}
.content-top .portrait input {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0;
}
.content-top .portrait img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}