问题:打开弹窗,上传一张照片后,关闭再打开,之前上传的图片仍在列表里展示。
然后添加了几行代码,报错。
<el-upload list-type="picture-card"
:limit="1"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
</el-upload>
import type { UploadProps,UploadInstance } from 'element-plus'
const upload = ref<UploadInstance>()
// 上传成功回调
const handleAvatarSuccess: UploadProps['onSuccess'] = (
response,
uploadFile
) => {
upload.value.clearFiles()
}
打印出来的对象是这样的:
接下来就是改bug了……
找到原因了。
加上组件名就没问题了。
<el-upload list-type="picture-card"
ref="upload"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
</el-upload>
还有一个小问题,清除文件列表不能放在成功回调函数里,这样的话连眼下上传的图片都会被清除掉。