react+antd4+axios文件上传

直接贴代码：

import React, { useState, useEffect, Fragment } from 'react';
import { Form, Input, Button, message, Upload } from 'antd';
import personApi from 'api/person';

const { TextArea } = Input;
const formItemLayout = {
 labelCol: {
  xs: { span: 24 },
  sm: { span: 6 }
 },
 wrapperCol: {
  xs: { span: 24 },
  sm: { span: 18 }
 }
};
const Add = (props) => {

 const [form] = Form.useForm();

 const handleSubmit = () => {
   form.validateFields().then((fieldsValue) => {
   	// 给后台参数 formData格式
     const formData = new FormData();
     // 处理其他参数
   	 let params = { ...fieldsValue };
     delete params.files;
     for (let key in params) {
       if (params[key]) {
         formData.append(key, params[key]);
       }
     }
     // 处理文件 这里取到的文件是数组
     fieldsValue.file && fieldsValue.file.forEach((file) => {
       formData.append('file', file.originFileObj);
     });
     // 掉接口
     personApi.add(formData).then((res) => {
        if (res.data.data !== 0) {
         message.success('添加成功');
        } else {
         message.error('添加失败');
       }
    });
  });
};

const normFile = (e) => {
   if (Array.isArray(e)) {
   return e;
  }
  return e && e.fileList;
};

const uploadProps = {
   beforeUpload: () => {
     return false; // 手动上传
   }
};

return (
  <Form {...formItemLayout} form={form}>
    <Form.Item label="姓名" name="name">
      <Input />
    </Form.Item>
    <Form.Item label="手机号" name="tel">
      <Input />
    </Form.Item>
    <Form.Item label="备注" name="memo">
      <TextArea autoSize />
    </Form.Item>
      <Form.Item
        name="files"
        label="上传"
        valuePropName="fileList"
        getValueFromEvent={normFile}
      >
        <Upload {...uploadProps} multiple>
          <Button>
            <UploadOutlined /> 上传
          </Button>
        </Upload>
      </Form.Item>
      <Form.Item>
         <Button onClick={handleSubmit} type="primary">
           提交
        </Button>
      </Form.Item>
   </Form>
  );
};
export default Add;

结束，拜拜。