joywok-material-components/components/teamscope/UploadExcel.js

<h1 align="center"> Joywok Material Components </h1>

/**
 * 上传excel
 */
import React, { Component } from 'react';
import { connect } from 'dva';
import { PropTypes } from "prop-types";
import { Upload, message, Modal } from 'antd';

class UploadExcel extends React.Component {
  state = {
    uploading: false,
    action: '/file/upload'
  }
  render() {
    let self = this;
    const upload = {
      name: 'file',
      headers: {
        'Access-Token': window.AccessToken
      },
      withCredentials: true,
      showUploadList: false,
      accept:self.props.accept||'',
      customRequest: function (option) {
        function getError(option, xhr) {
          var msg = 'cannot post ' + option.action + ' ' + xhr.status + '\'';
          var err = new Error(msg);
          err.status = xhr.status;
          err.method = 'post';
          err.url = option.action;
          return err;
        }
        function getBody(xhr) {
          var text = xhr.responseText || xhr.response;
          if (!text) {
            return text;
          }
          try {
            return JSON.parse(text);
          } catch (e) {
            return text;
          }
        }
        var xhr = new XMLHttpRequest();
        if (option.onProgress && xhr.upload) {
          xhr.upload.onprogress = function progress(e) {
            if (e.total > 0) {
              e.percent = e.loaded / e.total * 100;
            }
            option.onProgress(e);
          };
        }
        var formData = new FormData();
        if (option.data) {
          Object.keys(option.data).map(function (key) {
            formData.append(key, option.data[key]);
          });
        }
        formData.append(option.filename, option.file);
        xhr.onerror = function error(e) {
          option.onError(e);
        };
        xhr.onload = function onload() {
          if (xhr.status < 200 || xhr.status >= 300) {
            return option.onError(getError(option, xhr), getBody(xhr));
          }
          option.onSuccess(getBody(xhr));
        };
        var actionUrl = self.props.baseUrl ? (self.props.baseUrl + encodeURIComponent(option['file']['name'])) : (self.state.action + '/' + encodeURIComponent(option['file']['name']));
        xhr.open('POST', actionUrl, true);
        if (option.withCredentials && 'withCredentials' in xhr) {
          xhr.withCredentials = true;
        }
        var headers = option.headers || {};
        if (headers['X-Requested-With'] !== null) {
          xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        }
        for (var h in headers) {
          if (headers.hasOwnProperty(h) && headers[h] !== null) {
            xhr.setRequestHeader(h, headers[h]);
          }
        }
        xhr.send(option.file);
        return {
          abort: function abort() {
            xhr.abort();
          }
        };
      },
      beforeUpload(file){
        if(typeof(self.props.beforeCheck)!='undefined'){
          if(self.props.beforeCheck(file)){
            return false
          }
        }
        // return false
      },
      onStart(info) {
        if (self.props.isSection) {
          self.props.onStart()
        } else {
          // message.loading(i18n('label.fileupload.uploading') + info['name']);
          self.props.onStart&&self.props.onStart()
        }
        self.setState({ uploading: true })

      },
      onChange(info) {
      },
      onProgress(step, file) {
        self.props.onProgress && self.props.onProgress(step, file)
      },
      onError(){
        message.destroy();
        let tip = i18n('label.sys-error')+"，"+i18n("label.contact-admin");
        message.error(tip,2000)
      },
      onSuccess(info) {
        console.log(info,'返回的是什么啊');
        if (info['JMStatus'] && info['JMStatus']['code'] == 20523) {
          Modal.warning({
            title: i18n('label.fileupload.img_format_error'),
            content: (
              <div>
              </div>
            ),
            onOk() {
              self.setState({ uploading: false })
              message.destroy();
            },
          });
        }else if (info['JMStatus'] && info['JMStatus']['code'] == 20502) {
          message.destroy();
          Modal.warning({
            title: info['JMStatus']['errmemo'],
            content: (
              <div>
              </div>
            ),
            onOk() {
              self.setState({ uploading: false })
              message.destroy();
            },
          });
        } else if (info['JMFile'] && (!info['JMFile']['id'])) {
          Modal.warning({
            title: i18n('label.fileupload.uploaderror'),
            content: (
              <div>
              </div>
            ),
            onOk() {
              self.setState({ uploading: false })
              message.destroy();
            },
          });
        } else {
          self.setState({ uploading: false })
          message.destroy();
          self.props.change(info);
        }
      }
    };
    
    return (
      <div className="jw-upload-logo">
      <div className="upload-w">
        <div className="upload-action">
          <Upload {...upload} className="upload" onChange={(e) => (self.props.onChange && self.props.onChange(e))} >
            {this.props.children}
          </Upload>
        </div>
      </div>
    </div>
   )
 
  }

  componentDidMount(){
    if(this.props.clsName){
      this.setState({
        uploading: true
      })
    }
  }

}

export default connect(function (state) {
  return state;
})(UploadExcel);