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: () => {}, };