[BUG]源码错误的位置使用resultField导致imgupload回显异常 && imgUpload set string的异常
electroluxcode opened this issue · 0 comments
electroluxcode commented
- 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: