reactjs - Antd中如何获取form.item中Upload的值？

Question

即使文件已上传 antd Form.item 规则也会抛出错误。这意味着它没有从上传到 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 绑定(bind)

Answer 1

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

const getFile = (e) => {
  console.log('Upload event:', e);

  if (Array.isArray(e)) {
    return e;
  }
 return e && e.fileList;
};

和 Form.Item for image 会像这样

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

并且你可以在onFinish中得到所有的表单值

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

进一步引用this