element的upload组件头像上传，点击不同用户不能显示不同用户头像的问题

对于element，在使用upload组件的时候，遇到了一个想不懂的问题： 

    创建多个不同用户后，再次点击编辑用户信息头像的时候，发现不能显示对应的用户头像

<el-form-item label="头像">
  <Upload
  @on-transport-file-list="handleTransportFileList"
  :max-size="5120"
  :limit="1"
  type="img"
  :fileList="[formValidate.avatar]"
>
</Upload>
</el-form-item>

虽然已经能获取到不同的头像url（formValidate.avatar），但是就是不肯显示不同的用户头像，只是单调的显示浏览器缓存好的唯一一个头像。

 

解决的办法就是 在获取不用头像url的时候，监视url的变化，让upload组件重新渲染就可以了

我的办法就是在upload组件添加一个v-if，通过监视url的变化，显示/消失upload组件，代码如下： 

<el-form-item label="头像" v-if="show">
  <Upload
  @on-transport-file-list="handleTransportFileList"
  :max-size="5120"
  :limit="1"
  type="img"
  :fileList="[formValidate.avatar]"
>
</Upload>
</el-form-item>

data() {
 return {
        show: false
    }
}

 

watch: {
      dialogVisible(){ // 监视表单信息是否加载
        this.show = false // 不管是否加载成功，先让upload组件消失
        get({id: this.editId}, res=> {
          // 当异步数据回来之后
          this.formValidate = res
          this.dialogVisible2 = this.dialogVisible
           // 再将upload组件显示
          this.show = true
        })
      }
}