vue.js 为什么更新头像时需要重新刷新页面才能显示...

Question

想要实现更换头像的功能，但为啥每次需要重新刷新页面才显示更改之后的头像，能看到用于存储头像的文件夹里的图片都更换了，没有刷新的话路由切换出去再切换回来又变成以前那个头像，而且注销再次登录也是以前那个头像，这是点解。。。。

这是我的vue.js代码

      <td id="yi">
          <div class="touxiang" @click.stop='uploadHeadImg'>
               <img :src="userInfos.avatar" alt="">
          </div>
          <input type="file" accept="image/jpg,image/png,image/jpeg" @change='handleFile' class="hiddenInput" name="avatar" ref='avatarInput'>
          <a @click="dianwo">确认修改</a>
     </td>
     

data里的

    userInfos:{
            avatar:''
        }
    

methods 里的

    //头像
        uploadHeadImg(){
            this.$el.querySelector('.hiddenInput').click()
        },
        handleFile(e){
            let $target = e.target || e.srcElement  //调用它的各种属性
            let file = $target.files[0]
            var reader = new FileReader()
            reader.onload = (data)=>{
                let res = data.target || data.srcElement
                this.userInfos.avatar = res.result
            }
            reader.readAsDataURL(file)
        },
        dianwo(){
            if(this.$refs.avatarInput.files.length !== 0){
                var image = new FormData()
                image.append('avatar',this.$refs.avatarInput.files[0])
                image.append('username',this.name)
                this.$axios.post('/touxiang',image,{     
                    headers:{
                        "Content-Type":"multipart/form-data"
                    }
                })
                .then((res)=>{
                    //console.log('上传成功了')
                    //location.reload()
                    //this.$router.go(0)  //就是这里完成之后刷新页面才能显示更改之后的头像
                })

            }
            

        }

这是我登录那个方法判断用户有没有更改过头像从而加载默认或者修改后的头像

       
            this.$axios.get('/gettouxiang/'+uname)
            .then((res)=>{
                if(res.list !== null){
                    this.userInfos.avatar = 'static/assets/用户信息/'+ uname + '/avatar.jpg'
                }else{
                    //console.log('旧的')
                    this.userInfos.avatar = 'static/assets/头像2.jpg'
                }
            })
        

这是不同用户存储的头像图片，这是测试用户的 ，里头都是avatar.jpg

这是Node.js里头的

      router.post('/touxiang',function(req,res,next){
          let form = new formidable.IncomingForm()
          form.parse(req,function(err,fields,files){
              if(err){
                  return next(err)
              }
              let username =fields.username
              let extname = path.extname(files.avatar.name)
              let oldpath = files.avatar.path;
              let newpath = '../static/assets/用户信息/'+username+'/avatar'+extname;
              let avatarName = 'avatar'+extname;

              fs.rename(oldpath,newpath,function(error){
                  if(error){
                      console.log(error)
                  }
              })
    
                  User.updateOne({username:username},{photo:newpath},function(err,list){
                      if(err){
                          console.log(err)
                      }
                      Touxiang.findOne({
                          username:username
                      },function(errs,docs){
                          if(errs){
                              console.log(errs)
                          }
                          if(docs == null){
                              new Touxiang({
                                  username:username,
                                  photo:avatarName
                              }).save(function(error,result){
                                  if(error){
                                      console.log(error)
                                  }
                                 res.json('done')
                
                              })
                          }else {
                              Touxiang.deleteOne({username:username},function(err2){
                                  if(err2){
                                      console.log(err2)
                                  }
                                  new Touxiang({
                                      username:username,
                                      photo:avatarName
                                  }).save(function(error,result){
                                      if(error){
                                          console.log(error)
                                      }
                                     res.json('done')
                    
                                  })
                             })
                        }
                 })
             })
       })
      })

Answer 1

兄弟你这个缩进看的我强迫症都犯了