vue实现头像更改并刷新功能

1. 实现效果如下
   

头像会直接调用相册及手机拍照功能，上传成功后自动更新更改头像

2.利用cube-ui组件实现，template代码如下

   <!-- 头像 -->
    <cube-upload
      ref="upload"
      v-model="files"
      :action="action"
      @files-added="addedHandler"
      @file-error="errHandler"
      class="tou"
    >
      <div class="clear-fix">
        <cube-upload-file
          v-for="(file, i) in files"
          :file="file"
          :key="i"
          style="display:none"
        ></cube-upload-file>
        <cube-upload-btn :multiple="false">
          <div class="bigbox" style="margin-top: 0px">
            <div class="touxiang">
              <span class="t">头像</span>
              <i
                class="iconfont icon-arrow-right-copy-copy"
                style="font-size: 20px; margin-top: 30px"
              ></i>
              <div class="toux" style="position: relative">
                <img
                  :src="info.head_img || defaultHeadImg"
                  alt="头像"
                  style="width: 100%; height: 100%;"
                />
              </div>
            </div>
          </div>
        </cube-upload-btn>
      </div>
    </cube-upload>

3.script代码

<script>
export default {
  name: "qrCode",
  data() {
    return {
      action: {
        target: "http://192.168.123.44:8089/api/v1/pri/user/user_face",//这里是自己设置的接口
        headers: {
          token: this.$store.state.token,//请求头携带token
        },
      },
      files: [],
    };
  },

  computed: { //缓存，获取vuex中保存的的token
    ...mapState(["token"]),
    getToken() {
      return this.$store.state.token;
    },
  },
  methods: {
    addedHandler() {
      const file = this.files[0];
      file && this.$refs.upload.removeFile(file);
       
       this.$createToast({
        type: "success",
        txt: "上传成功",
        time: 1000,
           $events: {
          timeout: () => {
            //  this.$router.replace('/personal')
             location.reload();//上传成功后自动刷新页面，刚上传的头像显示出来
          }
        }
        
      }).show();
      
      
    },
   
    
    errHandler(file) {//上传失败
      // const msg = file.response.message
      this.$createToast({
        type: "warn",
        txt: "Upload fail",
        time: 1000,
      }).show();
    },
   
  },
  mounted() {
    if (this.getToken) {
      this.getInfo();
      
      
    }
  

  
  },
};
</script>