vue 更改头像

版权声明：未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/83411123

---

 注意： 

 

1.this.$el.querySelector('.hiddenInput') 是获取文档中 class=”hiddenInput” 的元素。 

2.在打开文件夹选中图片确认后，执行handleFile函数 

3.let $target = e.target || e.srcElement 表示调用他的各种属性， 

两个的区别是：ie下支持e.srcElement，ff支持e.target。 

4.由于手机上可以选择多张图片，所以let file = $target.files[0]，表示取第一张图。 

5.var reader = new FileReader() FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲

区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。 

6.onload 事件会在页面或图像加载完成后立即发生。 

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

<template>
    <div class="add-person">
        <div class="accomplish" @click="accomplish">完成 </div>
        <ul class="person-info">
            <li>
                <div class="photo" @click.stop="uploadHeadImg">
                    <!-- <img :src="imgSrc"> -->
                    <img :src="userInfo.avatar" />
                    <span class="img-title">头像</span>
                </div>
                <input type="file" accept="image/*" @change="handleFile" class="hiddenInput" />
                <ul class="content">
                    <li v-for="items in list">
                        <span class="title">{{items.title}}</span>
                        <input type="text" class="title-con" v-model="items.conent">
                    </li>
                </ul>
            </li>
        </ul>
        <ul class="contact-way"></ul>
    </div>
</template>
<script>
export default {
  data() {
    return {
      datas: new FormData(),
       userInfo: {
        avatar:
          "https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=62d46c39067b020818c437b303b099b6/d4628535e5dde7119c3d076aabefce1b9c1661ba.jpg"
      },
      imgSrc: require("../../../assets/img/Path.png"),
      list: [
        {
          title: "姓名",
          conent: "carrie"
        },
        {
          title: "公司",
          conent: "微达安"
        },
        {
          title: "职位",
          conent: "web开发工程师"
        },
        {
          title: "手机",
          conent: "18319566585"
        },
        {
          title: "邮箱",
          conent: "[email protected]"
        },
        {
          title: "座机",
          conent: "0755-5468759"
        }
      ]
    };
  },
  methods: {
    accomplish() {
      console.log(`完成`);
    },
    uploadHeadImg() {
      // 点击的时候触发input打开图片上传的点击事件
      this.$el.querySelector(".hiddenInput").click();
    },
    // 将头像显示
    handleFile(e) {
        //获取当前点击事件的target元素对其进行兼容
      let $target = e.target || e.srcElement;
        //   取第一个元素
      let file = $target.files[0];
    /**
     * 使用FileReader对象，
     * web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，
     * 可以使用File对象或者Blob对象来指定所要处理的文件或数据。
     *  */ 
      var reader = new FileReader();// //读取本地文件，以gbk编码方式输出
      reader.onload = data => {//成功读取后
      console.log(data)
        let res = data.target || data.srcElement;
        // //读取完毕后输出结果
        this.userInfo.avatar = res.result;
      };
      reader.readAsDataURL(file);
    }
  }
};
</script>

css:

<style lang="less" scoped>
.accomplish {
  display: inline-block;
  position: fixed;
  right: 0.506667rem;
  top: 0.193333rem;
  z-index: 166;
  color: #fff;
  font-size: 0.426667rem;
}
.person-info,
.contact-way {
}
.person-info {
  margin-top: 1.466667rem;
  border-bottom: 1px solid rgb(229, 229, 229);
  .content {
    li {
      background-color: #fff;
      width: 100%;
      padding: 0.266667rem 0;
      padding-left: 0.666667rem;
      border-top: 1px solid rgb(229, 229, 229);
    }

    li:first-child > .title {
      color: rgb(51, 51, 51);
    }
    li:nth-child(4) {
      margin-top: 0.266667rem;
    }
    li:nth-child(4) > .title,
    li:nth-child(5) > .title {
      color: rgb(51, 51, 51);
    }
    .title {
      font-size: 0.426667rem;
      color: rgb(153, 153, 153);
    }
    .title-con {
      font-size: 0.373333rem;
      color: rgb(153, 153, 153);
      margin-left: 0.266667rem;
    }
  }
}
.person-info > li {
  // padding-left: .666667rem;
  padding-top: 0.266667rem;
}
.photo {
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.266667rem;
  background-color: #fff;
  padding: 0.4rem;
  img {
    width: 1.333333rem;
    height: 1.333333rem;
  }
  .img-title {
    margin-right: 0.4rem;
    color: rgb(102, 102, 102);
    font-size: 0.426667rem;
  }
}
.hiddenInput{
    display: none;
}
</style>