侧边栏壁纸
博主头像
简单的博客博主等级

种瓜得瓜,种豆得豆。

  • 累计撰写 15 篇文章
  • 累计创建 8 个标签
  • 累计收到 2 条评论

目 录CONTENT

文章目录

解决VantUI Uploader组件上传后不刷新

简单
2024-08-29 / 0 评论 / 0 点赞 / 7 阅读 / 813 字
  1. 给Uploader组件设置一个变化的key

  2. 上传图片后通过更新key引起虚拟DOM的刷新

<van-uploader 
	:key="uploaderKey" 
	:after-read="afterRead"
	v-model="fileList" 
	@delete="handleDelete" 
	:max-count="1" 
	accept=".png,.jpg,.jpeg">

  <template #preview-cover="{ file }">
    <img :src="file.url || ruleForm.imgCertificateFace" alt=""/>
  </template>
</van-uploader>

const uploaderKey = ref(0);

const refreshUploader = () => {
  uploaderKey.value += 1; // 改变 key 的值以强制重新渲染
};

const afterRead = (file) => {
	// 其他处理
    refreshUploader();
}

const handleDelete = (index) => {
  // 其他处理
  refreshUploader()
}

0

评论区