Antd Form Upload 报fileList错误-解决方案

原创于 2022-01-24 14:21:43 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#antd

React_AntD 专栏收录该内容

18 篇文章

订阅专栏

本文介绍使用Ant Design的Upload组件遇到的一个常见错误，并提供了解决方案。通过正确的配置Form表单，确保`valuePropName`设置为`fileList`并使用`getValueFromEvent`来规范化文件列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把Upload放在Form下面,初始化组件会提示一个错误

[antd: Upload] `value` is not a valid prop, do you mean `fileList`?

解决方案：表单 Form - Ant Designhttps://ant.design/components/form-cn/#components-form-demo-validate-other

提重点：

const normFile = (e: any) => {
  console.log('Upload event:', e);
  if (Array.isArray(e)) {
    return e;
  }
  return e && e.fileList;
};

<Form.Item
        name="upload"
        label="Upload"
        valuePropName="fileList"
        getValueFromEvent={normFile}
        extra="longgggggggggggggggggggggggggggggggggg"
      >
        <Upload name="logo" action="/upload.do" listType="picture">
          <Button icon={<UploadOutlined />}>Click to upload</Button>
        </Upload>
</Form.Item>