react使用antd的上传组件实现文件表单一起提交

最新推荐文章于 2024-07-09 09:24:08 发布

wangshuai33

最新推荐文章于 2024-07-09 09:24:08 发布

阅读量5k

点赞数 14

分类专栏： react 文章标签： react antd-ui

本文链接：https://blog.youkuaiyun.com/wangshuai33/article/details/118311410

版权

最近在刚刚开始使用react做项目，非常不熟练，非常小白。小白同学可以阅读了，因为我会写的非常简单，直白。

项目中需要实现表单中带附件提交，上传文件不单独保存调接口。

import { Form, Button, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
  
  const normFile = (e) => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  const Demo = () => {
    const onFinish = (values) => {
      console.log('Received values of form: ', values);
    };
  
    return (
      <Form
        name="validate_other"
        onFinish={onFinish}
        initialValues={
  {
          'input-number': 3,
          'checkbox-group': ['A', 'B'],
          rate: 3.5,
        }}
      >
        <Form.Item
          name="upload"
          label="Upload"
          valuePropName=