element的upload组件头像上传，上传成功后再次上传无反应

最新推荐文章于 2024-09-06 22:20:29 发布

my-coco

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量144

点赞数 2

文章标签：前端 vue javascript

本文链接：https://blog.csdn.net/weixin_45159207/article/details/141721786

版权

上传图片成功后再次点击上传图片，发现没反应
解决的办法就是 在获取头像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)
    },
  },