antd表单实现用户上传文件

在Ant Design（antd）中实现用户上传文件的功能，可以使用Form.Item组件配合Upload组件。以下是一个简单的例子：

import React from 'react';
import { Form, Upload, message, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
 
const Demo = () => {
  const onFinish = (values) => {
    console.log(values);
    message.success('提交成功！');
  };
 
  const onFinishFailed = (errorInfo) => {
    console.log('提交失败:', errorInfo);
  };
 
  const customRequest = ({ onSuccess, onError, file }) => {
    // 自定义上传逻辑，这里可以使用axios或其他HTTP库
    const formData = new FormData();
    formData.append('file', file);
 
    // 示例的上传代码，实际应用中应替换为真实的上传API
    fetch('your-upload-api', {
      method: 'POST',
      body: formData,
    })
    .then(response => response.json())
    .then(data => {
      onSuccess(data);
    })
    .catch(error => {
      onError(error);
    });
  };
 
  return (
    <Form
      name="file_upload"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item name="file" valuePropName="fileList" getValueFromEvent={(e) => e.fileList}>
        <Upload
          name="file"
          customRequest={customRequest}
          listType="text"
          onChange={(info) => {
            if (info.file.status !== 'uploading') {
              console.log(info.file, info.fileList);
            }
          }}
        >
          <Button icon={<UploadOutlined />}>上传文件</Button>
        </Upload>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};
 
export default Demo;

在这个例子中，我们使用Form组件创建了一个表单，并在其中嵌入了Upload组件。我们定义了一个customRequest函数来处理文件的上传，这里可以使用fetch API或其他HTTP库来发送文件。上传的文件将附带在FormData对象中，然后发送到一个假定的上传API（在实际应用中应替换为真实的上传API）。上传成功后，通过onSuccess回调通知Upload组件；如果上传失败，则通过onError回调通知。这个例子也展示了如何使用Form.Item的getValueFromEvent属性来处理上传后的值。