forked from Gitlink/forgeplus-react
129 lines
3.5 KiB
JavaScript
129 lines
3.5 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import moment from 'moment'
|
|
import Select, {Option, OptGroup} from 'rc-select';
|
|
import 'rc-select/assets/index.css';
|
|
|
|
import { Upload, Icon, Modal, message } from 'antd';
|
|
|
|
|
|
import 'antd/lib/upload/style/index.css'
|
|
import 'antd/lib/modal/style/index.css'
|
|
import 'antd/lib/style/index.css'
|
|
import 'antd/lib/message/style/index.css'
|
|
import './MemoNew.css'
|
|
// -------------------------------------------
|
|
|
|
|
|
let uploadValidateFailed = false;
|
|
function beforeUpload(file) {
|
|
const isJPG = file.type === 'image/jpeg';
|
|
const isPNG = file.type === 'image/png';
|
|
const isGIF = file.type === 'image/gif';
|
|
if (!isJPG && !isPNG && !isGIF) {
|
|
message.error('只能上传图片文件！(jpg、png或gif)');
|
|
uploadValidateFailed = true;
|
|
return false;
|
|
}
|
|
const isLt2M = (file.size / 1024 / 1024) < 2;
|
|
if (!isLt2M) {
|
|
uploadValidateFailed = true;
|
|
message.error('图片大小必须小于 2MB!');
|
|
return false;
|
|
}
|
|
uploadValidateFailed = false;
|
|
return true;
|
|
}
|
|
|
|
class ImageUpload extends Component {
|
|
state = {
|
|
previewVisible: false,
|
|
previewImage: '',
|
|
fileList: [
|
|
// {
|
|
// uid: -1,
|
|
// name: 'xxx.png',
|
|
// status: 'done',
|
|
// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
// }
|
|
],
|
|
};
|
|
|
|
handleCancel = () => {
|
|
|
|
this.setState({ previewVisible: false })
|
|
}
|
|
|
|
handlePreview = (file) => {
|
|
this.setState({
|
|
previewImage: file.url || file.thumbUrl,
|
|
previewVisible: true,
|
|
});
|
|
}
|
|
|
|
handleRemove = () => {
|
|
const { onImageUploadRemove } = this.props;
|
|
onImageUploadRemove()
|
|
}
|
|
|
|
componentWillReceiveProps(newProps, oldProps) {
|
|
// 初始化值
|
|
if (newProps.fileList && this.props.fileList.length != newProps.fileList.length) {
|
|
this.setState({
|
|
fileList: newProps.fileList
|
|
})
|
|
}
|
|
}
|
|
|
|
handleChange = ({ fileList }) => {
|
|
|
|
const { onImageUploadDone } = this.props;
|
|
if (fileList.length && fileList[0].status === 'done') {
|
|
onImageUploadDone(fileList[0])
|
|
}
|
|
if (!uploadValidateFailed) {
|
|
this.setState({ fileList })
|
|
}
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
const { previewVisible, previewImage, fileList } = this.state;
|
|
const { currentMemoId } = this.props;
|
|
const uploadButton = (
|
|
<div className="antuploadName">
|
|
<div className="antIconName"><Icon type="plus" /></div>
|
|
<div className="ant-upload-text">点击上传封面</div>
|
|
<div className="ant-upload-text">只支持JPG、PNG、JPEG大小不超过2M</div>
|
|
<div className="ant-upload-text">建议尺寸4:3</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="clearfix">
|
|
<Upload
|
|
action={"http://123.59.135.93/upload_memo_heads"}
|
|
listType="picture-card"
|
|
fileList={fileList}
|
|
onPreview={this.handlePreview}
|
|
onChange={this.handleChange}
|
|
onRemove={this.handleRemove}
|
|
beforeUpload={beforeUpload}
|
|
data={{
|
|
container_type: 'Memo',
|
|
container_id: currentMemoId ? currentMemoId : ''
|
|
}}
|
|
>
|
|
{fileList.length >= 1 ? null : uploadButton}
|
|
</Upload>
|
|
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
|
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ImageUpload;
|