美文网首页
2020-04-12 vant 上传头像 头像无法更新问题解决

2020-04-12 vant 上传头像 头像无法更新问题解决

作者: 追寻1989 | 来源:发表于2020-04-12 17:13 被阅读0次
<van-uploader :after-read="onRead">
           <img :src="userInfo.avatar" :key="userInfo.avatar" alt="你的头像">
           <!-- 用来更新头像,去掉会导致上传后头像无法及时更新,只有多加这个副本才能监听到头像变化,可能是个组件的bug -->
           <img v-show="false" :src="avatar2" :key="avatar2 + '1'">
</van-uploader>
userInfo: {
  avatar: "",
},
avatar2: "",
// 上传头像
    onRead(file) {
      let params = new FormData(); //创建form对象
      params.append("file", file.file); //通过append向form对象添加数据//第一个参数字符串可以填任意命名,第二个根据对象属性来找到file
      let config = {
        headers: { //添加请求头
          Authorization:
            "Bearer " + window.localStorage.getItem("managementToken"),
          "Content-Type": "multipart/form-data"
        }
      };
     let url = "";
      axios.post(url, params, config).then(res => {
          console.log(res);
          this.userInfo.avatar=res.avatar
          this.avatar2=res.avatar
        }).catch(err => {
          console.log(err)
        });
    },

相关文章

网友评论

      本文标题:2020-04-12 vant 上传头像 头像无法更新问题解决

      本文链接:https://www.haomeiwen.com/subject/ksrbmhtx.html