vue更改头像功能

最新推荐文章于 2024-06-24 19:39:12 发布

可乐爆米花

最新推荐文章于 2024-06-24 19:39:12 发布

阅读量2.4k

点赞数 1

分类专栏：前端端端端端端

本文链接：https://blog.csdn.net/william_jzy/article/details/84861491

版权

前端端端端端端专栏收录该内容

59 篇文章 0 订阅

订阅专栏

在这里插入图片描述
点击修改头像=>

如上图效果
HTML代码：

	<div class="avatar">
        <span class="avatar_img">
          <img :src="info.avatar" alt>
        </span>
        <div class="changeavatar">
          <span class="replace" @click="uploadHeadImg">修改头像</span>
          <input
            type="file"
            accept="image/jpeg, image/jpg, image/png"
            @change.stop="handleFile"
            class="hiddenInput"
          >
        </div>
      </div>

css:将上传框隐藏

.avatar {
    @include wh(200px, 330px);
    margin: 0 auto;
    text-align: center;
    span {
      display: block;
    }
    .avatar_img {
      @include wh(130px, 130px);
      margin: 60px auto 40px;
      img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
    }
    .replace {
      display: block;
      font-size: 28px;
      color: #fff;
      padding: 10px 10px;
      border: 1px solid #fff;
      border-radius: 30px;
    }
  }
  .changeavatar {
	  position: relative;
	  .hiddenInput {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    display: none;
	  }
}

JS：

	// 修改头像
    uploadHeadImg() {
      // 点击修改头像，获取文档中 class=”hiddenInput” 的元素
      this.$el.querySelector(".hiddenInput").click();
    },
    handleFile(e) {
      let $target = e.target || e.srcElement;
      let file = $target.files[0];
      var reader = new FileReader();
      reader.onload = data => {
        let res = data.target || data.srcElement;
        // 修改页面和vuex中的图片路径
        this.info.avatar = res.result;
        this.$store.state.account.avatar = res.result;
      };
      reader.readAsDataURL(file);
    }

点击头像，选中图片返回后，
调用handleFile函数，let file = $target.files[0]，表示取选中的第一张图，
var reader = new FileReader() FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
onload 事件会在页面或图像加载完成后立即发生。
FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data UR

——————
但是这里只是将图片显示出来，并没有保存起来，如果需要上传或者保存，需要后台接口配合。