96 lines
2.7 KiB
JavaScript
96 lines
2.7 KiB
JavaScript
import React from "react";
|
|
import { Icon, message, Modal, Upload } 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} alt=""/>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
}
|