vue本地头像实时更新

代码

template

    <div class="form-group">
      <p><label for="avatar">
        <img :src="imageUrl" alt="" id="img" ref="img" style="width: 100%;">
      </label></p>
      <input type="file" name="avatar" id="avatar" style="display: none" @change="changeimg">
    </div>

script

<script>
export default {
  data() {
    return {
      // 图片路径
      imageUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    }
  },
  methods: {
    //  更新头像
    changeimg(e) {
      // 1.产生一个文件阅读器对象
      const myFileReader = new FileReader();
      // 2.获取用户上传的头像文件
      // let avatarObj = document.getElementById('avatar').files[0];
      const avatarObj = e.target.files[0]
      // 3.将文件对象交给阅读器加载
      myFileReader.readAsDataURL(avatarObj)  // IO操作 需要消耗时间 但是是异步
      // 4.修改img标签的src属性
      // 等待文件阅读器对象加载完毕之后再修改src属性
      myFileReader.onload = (e) => {
        this.imageUrl = e.target.result
      }
    },
  }
}
</script>

style

/*头像*/
.form-group {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}