vbenjs/vue-vben-admin

[BUG]源码错误的位置使用resultField导致imgupload回显异常 && imgUpload set string的异常

electroluxcode opened this issue · 0 comments

  • 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

  • bug1:点击 点我用Array赋值 field6组件 ,然后点击 ImgUpload组件自带 的删除。最后点击 查询,预期是

    {  field6: ['https://avatars.githubusercontent.com/u/54492610?s=60&v=4']}
    

    但是结果是

    {  field6:[undefined]}
    
  • bug2:点击 点我用String赋值 field6组件 ,然后立即点击查询。预期是

    {  field6:['https://avatars.githubusercontent.com/u/54492610?s=60&v=4']}
    

    但是结果是

    {  field6:'https://avatars.githubusercontent.com/u/54492610?s=60&v=4'}
    

    在这个地方中新增一个然后删除一个。点击查询 却又变回

    {  field6:['https://avatars.githubusercontent.com/u/54492610?s=60&v=4']}
    

Reproduction

<template>
  <PageWrapper title="上传组件示例">
    <Button @click="clickMeStrImgload">点我用String赋值 field6组件</Button>
    <Button @click="clickMeArrImgload">点我用Array赋值 field6组件</Button>
    <BasicForm @register="registerPreview" class="my-5" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { useMessage } from '@/hooks/web/useMessage';
  import { BasicForm, FormSchema, useForm } from '@/components/Form';
  import { PageWrapper } from '@/components/Page';
  import { Button } from 'ant-design-vue';
  import { uploadApi } from '@/api/sys/upload';

  const clickMeArrImgload = () => {
    setFieldsValue({
      field6: [
        'https://avatars.githubusercontent.com/u/54492610?s=60&v=4',
        'https://avatars.githubusercontent.com/u/54492610?s=60&v=4',
      ],
    });
  };
  const clickMeStrImgload = () => {
    setFieldsValue({
      field6: 'https://avatars.githubusercontent.com/u/54492610?s=60&v=4',
    });
  };

  const schemasPreview: FormSchema[] = [
    {
      field: 'field6',
      component: 'ImageUpload',
      label: '字段6',
      componentProps: {
        resultField: 'data6.url',
        api: (file, progress) => {
          return new Promise((resolve) => {
            uploadApi(file, progress).then((uploadApiResponse) => {
              resolve({
                code: 200,
                data6: {
                  url: uploadApiResponse.data.url,
                },
              });
            });
          });
        },
        multiple: false,
        maxNumber: 5,
      },
    },
  ];
  const { createMessage } = useMessage();
  // registerPreview
  const [registerPreview, { getFieldsValue: getFieldsValuePreview, setFieldsValue }] = useForm({
    labelWidth: 160,
    schemas: schemasPreview,
    actionColOptions: {
      span: 18,
    },
    submitFunc: () => {
      return new Promise((resolve) => {
        console.log(getFieldsValuePreview());
        resolve();
        createMessage.success(`请到控制台查看结果`);
      });
    },
  });
</script>


System Info

  • Operating System:
  • Node version:
  • pnpm version: