vbenjs / vue-vben-admin

A modern vue admin. It is based on Vue3, vite and TypeScript. It's fast!

Home Page:https://vben.vvbin.cn/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

UploadPreviewModal组件,预览多张图片时,点击删除会清空所有图片

zhangyi1234 opened this issue · comments

⚠️ 重要 ⚠️ 在进一步操作之前,请检查下列选项。如果您忽视此模板或者没有提供关键信息,您的 Issue 将直接被关闭

  • 已阅读 文档.
  • 确保您的代码已是最新或者所报告的 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