当前位置: 代码迷 >> 综合 >> element的upload组件头像上传,点击不同用户不能显示不同用户头像的问题
  详细解决方案

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

热度:97   发布时间:2024-01-26 02:37:16.0

对于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 = resthis.dialogVisible2 = this.dialogVisible// 再将upload组件显示this.show = true})}
}

 

  相关解决方案