react+antd的dialog附件上传组件

 

/**
 * Created by Sophie on 2021/5/6.
 */
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Upload } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import { ajax } from '..//index';
const { Dragger } = Upload;

// 创建div
let div;
div = window.document.createElement('div');
window.document.body.appendChild(div);
class Attachment extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataReportVisible: true,
      fileList: []
    }
  }

  dataReportHandler = () => {
    // 销毁div 
    ReactDOM.unmountComponentAtNode(div);
  }

  import = () => {
    // 附件上传 
  }

  render() {
    const DragerProps = {
      multiple: true,
      beforeUpload: file => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
    };
    return (
      <div>
        <Modal title="附件上传" centered
          visible={this.state.dataReportVisible}
          onOk={()=>this.import()}
          onCancel={()=>this.dataReportHandler(false)}>
          <Dragger {...DragerProps}>
            <p className="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p className="ant-upload-text">单击或拖动文件到此区域以上传</p>
          </Dragger>
        </Modal>
      </div>
    )
  }
}

// 抛出函数
export function attachmentFile(param, callback) {
  const element = <Attachment param={param} callback={callback}/>;
  ReactDOM.render(element, div);
}