上传图片。没有后台

最新推荐文章于 2022-07-25 16:11:16 发布

酒玖

最新推荐文章于 2022-07-25 16:11:16 发布

阅读量325

点赞数

分类专栏：积累文章标签：上传

本文链接：https://blog.csdn.net/qq_42809973/article/details/95455140

版权

积累专栏收录该内容

4 篇文章 0 订阅

订阅专栏

        <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%;
}