如何从Antd中的form.item获取Upload的值

Question

即使文件已上载，但antd Form.item规则仍会引发错误。这意味着它没有从上传到表单中获得值。请说明我应该如何解决这个错误。请注意，我使用的是antd最新版本4.x，其中getFieldDecorator已被弃用。我还想手动上传文件。

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Alert, Upload } from 'antd';
import { UserOutlined, LockOutlined, UploadOutlined } from '@ant-design/icons';
import styles from './test1.module.css';
const Test1 = () => {
const [form] = Form.useForm();
const [state, setState] = useState({
fileList: [
{
thumbUrl:
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
],
});
const handleChange = (info) => {
console.log(info);
let fileList = [...info.fileList];
// 1. Limit the number of uploaded files
// Only to show two recent uploaded files, and old ones will be replaced by the new
fileList = fileList.slice(-1);
setState({ fileList: fileList });
};
const onFinish = (values) => {
console.log(form.getFieldsValue());
};
return (
<div className={styles.login_page}>
<Form
name='normal_login'
className={styles.form}
form={form}
onFinish={onFinish}
>
<Form.Item
name='email'
rules={[
{
required: true,
message: 'Please input your Email!',
},
]}
>
<Input
prefix={<UserOutlined className='site-form-item-icon' />}
placeholder='Email'
/>
</Form.Item>
<Form.Item
name='password'
rules={[
{
required: true,
message: 'Please input your Password!',
},
]}
>
<Input
prefix={<LockOutlined className='site-form-item-icon' />}
type='password'
placeholder='Password'
/>
</Form.Item>
<Form.Item
name='image'
rules={[
{
required: true,
message: 'input Image',
},
]}
>
<Upload
beforeUpload={(file) => {
// console.log(file);
return false;
}}
onChange={handleChange}
multiple={false}
listType='picture'
defaultFileList={state.fileList}
>
<Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>
</Form.Item>
<Form.Item>
<Button type='primary' htmlType='submit'>
Log in
</Button>
</Form.Item>
</Form>
</div>
);
};
export default Test1;

有什么方法可以将Upload的onChange事件侦听器与form.Item 绑定吗

Answer 1

在Form.Item中使用道具getValueFromEvent并传递返回文件对象的函数

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

图像的Form.Item将是这样的

<Form.Item name='image' getValueFromEvent={getFile}>
<Upload >
....
</Upload>
</Form.Item>

您可以在onFinish 中获取所有表单值

const onFinish = (values) => {
console.log(values)
}

如需进一步参考本

Answer 2

您可以使用Upload组件的maxCount道具。它会将上传文件限制为指定值。

参考：上传组件