ButtonUpload.js

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