95 lines
2.9 KiB
JavaScript
95 lines
2.9 KiB
JavaScript
import React from 'react'
|
|
import { Upload, Icon, Modal } from 'antd';
|
|
import "./index.less"
|
|
|
|
function getBase64(img, callback) {
|
|
const reader = new FileReader();
|
|
reader.addEventListener('load', () => callback(reader.result));
|
|
reader.readAsDataURL(img);
|
|
}
|
|
|
|
function beforeUpload(file) {
|
|
const isJPG = file.type === 'image/jpeg' || file.type==="image/png";
|
|
if (!isJPG) {
|
|
message.error('只允许上传jpg、png类型的图片!');
|
|
}
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isLt2M) {
|
|
message.error('图片大小限制2MB!');
|
|
}
|
|
return isJPG && isLt2M;
|
|
}
|
|
|
|
export default class BackgroundUpload extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
showOperate: false,
|
|
visible: false
|
|
}
|
|
}
|
|
|
|
// 上传完成监听
|
|
handleChange = (info) => {
|
|
if (info.file.status === 'done') {
|
|
this.props.onChange && this.props.onChange(info.file.response.data.acclink)
|
|
getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
|
|
}
|
|
}
|
|
|
|
// 删除
|
|
handleDelete = () => {
|
|
this.props.onChange && this.props.onChange(null);
|
|
}
|
|
|
|
// 预览
|
|
handlePreview = () => {
|
|
this.setState({visible: true})
|
|
}
|
|
|
|
render() {
|
|
const props = {
|
|
action: '/api/doc/upload/uploadFile',
|
|
multiple: false,
|
|
listType: "picture-card",
|
|
showUploadList: false,
|
|
onChange: this.handleChange.bind(this)
|
|
};
|
|
const { imageUrl } = this.props;
|
|
return (
|
|
<div className="uploadPictureWrapper">
|
|
{
|
|
(imageUrl || imageUrl == "") ?
|
|
<div className="previewWrapper" onMouseEnter={() => {
|
|
this.setState({showOperate: true})
|
|
}} onMouseLeave={() => {
|
|
this.setState({showOperate: false})
|
|
}}>
|
|
<img src={imageUrl} alt="" className="previewImg"/>
|
|
{
|
|
this.state.showOperate && <div className="operateWrapper">
|
|
<i className="icon-coms-Supervise operateIcon" onClick={() => {
|
|
this.handlePreview()
|
|
}}/>
|
|
<i className="icon-coms-Delete operateIcon" onClick={() => {
|
|
this.handleDelete()
|
|
}}/>
|
|
</div>
|
|
}
|
|
</div>
|
|
:
|
|
<Upload {...props}>
|
|
<Icon type="plus" className="avatar-uploader-trigger" />
|
|
</Upload>
|
|
}
|
|
<Modal visible={this.state.visible} width={600} footer={null} onCancel={() => {
|
|
this.setState({visible: false})
|
|
}} >
|
|
<div style={{width: "100%", textAlign: "center"}}>
|
|
<img src={imageUrl}/>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
} |