UploadForm.jsx 2.19 KB
import React, {useState} from 'react';
import {useRequest} from 'umi'
import {Form, message, Upload} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { _apiUrl_ } from '@/utils/common';
import style from './index.less';
import {fetchFileDelete} from '@/services/device'

const UploadForm = (props) => {
  const {name, title, listType = 'picture-card', fileType = 'image'} = props;

  const handleChange = info => {
    const file = info.file;
    if (file?.status === 'done'){
      if (!file.response.success) {
        message.error(file.response.message)
      }
    }
  };
  const handleRemove = async (file) => {
    if (file?.fileId){
      const result = await fetchFileDelete(file?.fileId);
      return result.success
    }else {
      return true
    }
  }
  const options = {
    headers: {
      Authorization: `bearer ${localStorage.getItem("Authorization")}`
    },
    action: `${_apiUrl_}/account-service/file/${ fileType }`,
    name: 'docFile',
    onChange: handleChange,
    onRemove: handleRemove
  };
  const normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    const fileList = e?.fileList
    if (fileList && e?.file?.status === 'done') {
      return e?.fileList?.filter(item => item?.response?.success || item?.url)
    }
    return e && e.fileList;
  };
  const isImg = file => {
    if (fileType !== 'image') return true
    return ['image/png', 'image/jpeg'].indexOf(file.type) > -1;
  }
  const beforeUpload =  file => {
    if (!isImg(file)) {
      message.error(`只能上传图片文件`);
    }
    return isImg(file) ? true : Upload.LIST_IGNORE;
  }

  return (
    <div className={listType === 'text' ? style.upload_btn_box : ''}>
      <Form.Item
        name={name}
        valuePropName="fileList"
        getValueFromEvent={normFile}
      >
        <Upload
          listType={ listType || 'text' }
          {...options}
          beforeUpload={beforeUpload}
        >
          <div className={style.upload_btn}>
            <PlusOutlined />
            <div style={{ marginTop: 5 }}>
              <span>{title || '上传文件'}</span>
            </div>
          </div>
        </Upload>
      </Form.Item>

    </div>
  );
};

export default UploadForm;