import React from 'react'; import {Upload, message} from 'antd'; import config from '@/webPublic/one_stop_public/config'; import {zipImage} from "@/webPublic/zyd_public/utils/handlePhoto"; import { getToken } from '@/webPublic/one_stop_public/utils/token'; export default class ImgUploadCom extends React.Component { constructor(props) { super(props); const value = props.value; this.state = { url: value, }; } triggerChange = changedValue => { // Should provide an event to pass value to Form. const onChange = this.props.onChange; if (onChange) { onChange(changedValue); } }; componentWillReceiveProps(nextProps) { // Should be a controlled component. if ('value' in nextProps) { const value = nextProps.value; this.setState({url: value}); } } changeUrl = (info, key) => { if (info.file.status === 'done') { message.success(`图片上传成功`); if (!('value' in this.props)) { this.setState({url: info.file.response}); } this.triggerChange(info.file.response); } else if (info.file.status === 'error') { message.error(`图片上传失败`); } }; changePos = obj => { if (!('value' in this.props)) { this.setState({...obj}); } this.triggerChange({...obj}); }; render() { const {json, disabled} = this.props; const {url} = this.state; return ( <Upload.Dragger disabled={disabled} accept={'image/*'} url={url} headers={{ Authorization: `bearer ${getToken()}`, }} data={{ token: getToken(), }} beforeUpload={(file) => { return zipImage(file, 4); // 图片压缩函数. 超过fileSizeLimitMb兆的图片 直接压缩成原来的 30% 如果后续有其他需求考虑 做成全局配置项 配置可以压缩的图片的范围 // 禅道bug 23185 }} showUploadList={false} name="file" action={config.uploadUrl} onChange={this.changeUrl} multiple={false} style={{padding: 0}} > {url ? ( <img src={config.httpServer + url} style={{ height: json.height, width: json.width, maxWidth: '60vw', // 解决图片在移动端过宽的bug }}/> ) : ( <div style={{height: json.height, width: json.width}}/> )} </Upload.Dragger> ); } }