react-封装上传组件Uploader

import React, { useState, FC, useEffect } from 'react';
import { Upload, Picture } from 'choerodon-ui/pro';
import { getAccessToken } from 'hzero-front/lib/utils/utils';
import { Icon } from 'choerodon-ui';
import api from './api';
import './style.less';

interface Props {
  [key: string]: any;
}

const Uploader: FC<Props> = ({ onChange, disabled, fileKey, fileName, extra }) => {
  const [list, setList] = useState<any[]>([]);

  useEffect(() => {
    if (fileKey) {
      setList([
        {
          name: fileName,
          type: 'image/*',
          status: 'success',
          uid: 1,
          url: api.getImage(fileKey),
        },
      ]);
    } else {
      setList([]);
    }
  }, [fileKey]);

  const uploadProps = {
    headers: {
      'Access-Control-Allow-Origin': '*',
      Authorization: `bearer ${getAccessToken()}`,
    },
    name: 'file',
    action: api.fileUpload,
    method: 'post',
    accept: ['image/*'],
    multiple: false,
    uploadFileList: list,
    extra,
    onFileChange: (fileList) => {
      let newList: any[] = [];
      if (fileList.length > 1) {
        newList = [fileList[1]];
      } else {
        newList = [fileList[0]];
      }

      setList(newList);
    },
    onUploadSuccess: (response) => {
      if (onChange) {
        onChange(JSON.parse(response));
      }
    },
  };

  const handleChange = (newList: any[]) => {
    setList(newList);
  };

  const handleImageClick = (e) => {
    e.stopPropagation();
  };

  const handleRemove = () => {
    handleChange([]);
  };

  const uploadPlaceholder = (
    <div className="custom-uploader-button">
      <Icon type="file_upload" />
      上传
    </div>
  );

  return (
    <div className="custom-uploader">
      <Upload showUploadBtn={false} showUploadList={false} {...uploadProps} disabled={disabled}>
        {list.length ? (
          <div onClick={handleImageClick} className="custom-uploader-preview">
            <Picture src={list[0].url} />
            {!disabled && <Icon type="close" onClick={handleRemove} />}
          </div>
        ) : (
          uploadPlaceholder
        )}
      </Upload>
    </div>
  );
};

export default Uploader;

使用：

        <Uploader
          disabled={readOnly}
          fileKey={fileKey}
          fileName={fileName}
          onChange={(value) => consle.log('上传返回的结果',value)}
        />