upload 上传文件

一、封装
import React, { useState, useEffect, useRef } from 'react';
import styles from './index.less';
import { useDispatch, useSelector } from 'dva';
import { Form, Input, Button, Upload, message, Spin, Modal } from 'antd';
interface propType {
  onsuccess: (url: string) => void;
  extraImg: () => void;
  url:string;
  token:string;
}
const UploadFile: React.FC<propType> = props => {
  const { onsuccess, extraImg,url,token } = props;
  const [loading, setloading] = useState<boolean>(false);

  const uploadprops = {
    name: 'file',
    action: url ,
    headers: {
      authorization: 'authorization-text',
      token,
    },
    data: {},
    onChange(info) {
      setloading(true);
      if (info.file.status === 'done') {
        setloading(false);
        let res = info.file.response;
        if (res.code == 1008) {
          onsuccess(res.data);
        } else {
          message.error('上传失败');
        }
      } else if (info.file.status === 'error') {
      }
    }
  };
  return (
    <div className={styles.uploadImg}>
      <Upload {...uploadprops} listType="text">
        <Spin spinning={loading}>{extraImg()}</Spin>
      </Upload>
    </div>
  );
};
export default UploadFile;


二、调用
/**/
extraImg : 自定义上传区域内容
const extraImg = () => {
    <Button>
        上传图片
     </Button>
}
<UploadFile 
	onsuccess={onsuccessImage} 
	extraImg={extraImg} 
	url="*****"
	token="*******"
>
</UploadFile>