上传图片成功后再次点击上传图片,发现没反应
解决的办法就是 在获取头像url的时候,监视url的变化,让upload组件重新渲染就可行了
让upload组件添加一个v-if,通过监视url的变化,显示/消失upload组件,
<el-upload v-if="show" class="avatar-uploader" ref="upload" :headers="upload.header" :action="upload.action"
:multiple="upload.multiple" :auto-upload="true" :limit="upload.limit" :before-upload="OnBeforeUpload"
list-type="picture" :on-remove="OnRemove" :on-success="OnUploadSuccess" :show-file-list="false"
:disabled="disabled">
<el-image v-if="!!imageUrl || disabled" class="avatar" :src="imageUrl" fit="contain"
@click="OnPreview"></el-image>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
data() {
return {
show: true
}
}
watch: {
modelValue(val) {
this.imageUrl = val;
this.show= false
setTimeout(()=>{
this.show= true
},100)
},
},