头像：可上传以及绑定登录状态下的头像状态（手机端可拍照）

本文链接：https://blog.csdn.net/lllkkkg/article/details/124435381

<template>
  <div class="head-img">
    <input
      type="file"
      id="upload"
      style="display: none"
      accept="image/gif,image/jpeg,image/png,image/jpg"
      @change="freshImg"
    />
    <div class="border" @click="uploadIMg">
    <img v-if="!$store.state.isLogin" src="../assets/touxiang.png" class="imgDiv" /> 
    <img v-if="$store.state.isLogin" :src="$store.state.imgsrc" class="imgDiv" /> 
    </div>
  </div>
</template>

首先先上HTML，在头像未登录情况下我先绑定了个初始头像，所以是个固定的照片，而

<img v-if="$store.state.isLogin" :src="$store.state.imgsrc" class="imgDiv" /> 这里则是在vuex绑定了登陆状态情况下上传头像可以随机换掉所上传的头像。

JS语句

<script>
export default {
  data() {
    return {
      imgsrc: require("/src/assets/touxiang.png"),
      headTip: "点击上传头像",
    };
  },
  methods: {
    uploadIMg: function () {
      document.getElementById("upload").click();
    },
    freshImg: function (e) {
        let _this = this
      _this.imgObj = e.target.files["0"]; //得到上传的第一个文件
      let fr = new FileReader(); //异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
      fr.onload = function () {
        //在读取操作完成时触发
        _this.imgsrc = fr.result; // 图片文件赋值给图片标签路径
        _this.$store.commit('loginOK2',_this.imgsrc)
      };
      fr.readAsDataURL(_this.imgObj); //将读取到的文件编码成Data URL
      _this.headTip = ""; // 清空我的提示
    },
  },
};
</script>

css样式由自己需求所定