Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG]当upload的值有两个相同url的时候,没按照预期删除 #3871

Closed
3 tasks done
electroluxcode opened this issue May 24, 2024 · 0 comments · Fixed by #3872
Closed
3 tasks done

[BUG]当upload的值有两个相同url的时候,没按照预期删除 #3871

electroluxcode opened this issue May 24, 2024 · 0 comments · Fixed by #3872

Comments

@electroluxcode
Copy link
Contributor

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

  • Read the docs.
  • Make sure the code is up to date. (Some bugs have been fixed in the latest code)
  • This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Describe the bug

当upload的值有两个相同url的时候,即使删除的是最后一个,但是结果会删除第一个

阅读源码发现在代码中删除是使用 url作为key值,这显然在多个相同url的时候进行删除的时候就会有问题。并且原来的代码中也没有一个设置key值的机会

function handleRemove(record: PreviewFileItem | Record<string, any>, urlKey = 'url') {
const index = fileListRef.value.findIndex((item) => item[urlKey] === record[urlKey]);
if (index !== -1) {


color: 'error',
onClick: handleRemove.bind(null, record),
},

稍等会提一个pr,预计是broken change的(因为要引入uid取代掉用url作为key值)。下面的代码是一个复现示例,当第一个和第三个的值相同的时候,点击删除第三个,预期是删除掉第三个。但是结果是把第一个删掉了,

Reproduction

<template>
  <Alert message="bug" />
  <BasicForm @register="registerValiate" class="my-5" />
</template>

<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { BasicForm, FormSchema, useForm } from '@/components/Form';
  import { useMessage } from '@/hooks/web/useMessage';
  import { uploadApi } from '@/api/sys/upload';

  const { createMessage } = useMessage();

  const schemasValiate: FormSchema[] = [
    {
      field: 'field1',
      component: 'Upload',
      label: '字段1',
      defaultValue: [
        'https://avatars.githubusercontent.com/u/1',
        'https://avatars.githubusercontent.com/u/2',
        'https://avatars.githubusercontent.com/u/1',
      ],
      componentProps: {
        api: uploadApi,
        maxNumber: 3,
      },
    },
  ];
  const [registerValiate, { getFieldsValue: getFieldsValueValiate, validate }] = useForm({
    labelWidth: 160,
    schemas: schemasValiate,
    actionColOptions: {
      span: 18,
    },
    submitFunc: () => {
      return new Promise((resolve) => {
        validate()
          .then(() => {
            resolve();
            console.log(getFieldsValueValiate());
            createMessage.success(`请到控制台查看结果`);
          })
          .catch(() => {
            createMessage.error(`请输入必填项`);
          });
      });
    },
  });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant