ButtonUpload.js 3.1 KB
Newer Older
王绍森's avatar
王绍森 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
import React, { Component, Fragment } from 'react';
import { Upload, message } from 'antd';
import ButtonDiy from '@/baseComponent/ButtonDiy';
import * as service from '@/baseComponent/UploadImgDiy/service';
import PropTypes from 'prop-types';

export default class ButtonUpload extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fileSize: props.fileSize || 2,
      loading: false,
    };
  }

  checkSize(file) {
    const { fileSize } = this.state;
    let flag = false;

    if (fileSize && file.size / 1024 / 1024 > fileSize) {
      message.error(`单个文件大小不能超过${fileSize}MB!`);
      flag = true;
    }

    return flag;
  }

  uploadFile = () => {
    const { onChange } = this.props;
    const file = this.fileInput.files[this.fileInput.files.length - 1];
    if (!file || this.checkSize(file)) {
      return;
    }
    this.setState({
      loading: true,
    });
    service.uploadFile({
      file: file,
    }).then(res => {
      this.setState({
        loading: false,
      });
      if (res) {
        message.success('上传成功');
        let data = {
          files: [
            {
              path: res.url,
              name:  file.name,
            },
          ],
        };
        onChange && onChange(data, this.fileInput);
      }
    });
  };

  selectFile = () => {
    this.fileInput.click();
  };

  render() {
    const { accept, buttonName, buttonClassName, value, readOnly, disabled } = this.props;
    const { loading } = this.state;
    const viewDom = <a href={value}
                       target="_blank">点击查看</a>;
    if (readOnly || disabled) {
      if(typeof value === 'object'){
        if(Array.isArray(value.files) && value.files.length){
          return <a href={value.files[0].path}
                    target="_blank">点击查看</a>;
        }else{
          return null;
        }
      }
      if (value) {
        return viewDom;
      }
      return null;
    }
    return (
      <Fragment>
        <label>
          <ButtonDiy name={loading ? '上传中' : buttonName}
                     loading={loading}
                     handleClick={this.selectFile}
                     className={buttonClassName}
          />
          <input type="file"
                 accept={accept}
                 style={{ display: 'none' }}
                 onChange={this.uploadFile}
                 ref={input => {
                   this.fileInput = input;
                 }}
          />
          {this.fileInput && this.fileInput.value.split('\\').pop()
          || value
          || <span style={{ color: '#D2D2D2' }}>未选择任何文件</span>}
        </label>
      </Fragment>
    );
  }
}

ButtonUpload.propTypes = {
  fileSize: PropTypes.number,   //  文件大小限制
  accept: PropTypes.string, // 上传类型限制
  buttonName: PropTypes.string, // 上传按钮名称
  buttonClassName: PropTypes.string,  //按钮样式
  onChange: PropTypes.func, // 上传成功回调
};
ButtonUpload.defaultProps = {
  fileSize: 2,
  accept: '',
  buttonName: '选择文件',
  buttonClassName: 'defaultBlue',
  onChange: () => {
  },
};