UploadPreviewModal组件,预览多张图片时,点击删除会清空所有图片
zhangyi1234 opened this issue · comments
- 已阅读 文档.
- 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
- 已在 Issues 中搜索了相关的关键词
- 不是 ant design vue 组件库的 Bug
描述 Bug
一次性上传多张图,上传完成后点击保存,在点开预览,然后删除其中一张图片,导致所有图片被清空
复现 Bug
我在form中使用了resultField
schemas: [{
component: 'Upload',
componentProps: {
maxNumber: 3,
resultField: 'url',
},
}]
调试发现 UploadPreviewModal组件中的参数 urlKey 可能有问题
// 删除
function handleRemove(record: PreviewFileItem | Record<string, any>, urlKey = 'url') {
console.log(urlKey); // 输入的是点击事件对象
const index = fileListRef.value.findIndex((item) => item[urlKey] === record[urlKey]);
console.log(index); // 输出0
if (index !== -1) {
const removed = fileListRef.value.splice(index, 1);
emit('delete', removed[0][urlKey]);
emit(
'list-change',
fileListRef.value.map((item) => item[urlKey]), //urlKey的问题 导致所有图片清空
);
}
}
系统信息
- 操作系统:macos
- Node 版本:v18.20.2
- pnpm 版本:9.0.4