问题:使用el-uplaod组件开发过程中,有的时候再次上传文件时,上次上传成功的文件会保留在el-upload的上传列表中
解决:在使用elementplus的upload上传组件的时候遇到一个问题,发现使用ref声明的数组(上传文件列表)与upload组件绑定之后无法使用常规方法手动清空,无论是重新赋值空数组还是将length赋值为0都不行,去官网看了一下发现组件本身提供了一个方法用于清空数组。
在我的项目中是这样使用的:
1.在 el-upload 组件上添加 ref 属性
<el-upload
ref="adModel"
action=""
:auto-upload="false
v-show="!fileName"
>
<div>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
</div>
<template #tip> </template>
</el-upload>
2.通过ref获取组件实例调用clearFiles方法
const adModel = ref(null);
adModel.value.clearFiles();
我的这个组件之前写的是v-if="!fileName",调用时会出错,我不太常用ref,这里需要注意ref
本身作为渲染结果被创建,在初始渲染的时候不能访问他们,是不存在的,所以后来我改成了v-show。