提交 9985ceb7 authored 作者: 钟是志's avatar 钟是志

30470 录取通知书模板设置功能优化

图片上传组件增加删除功能
上级 df0f3413
import React from 'react'; import React from 'react';
import {Upload, message} from 'antd'; import { Upload, message, Badge, Icon } from 'antd';
import config from '@/webPublic/one_stop_public/config'; import config from '@/webPublic/one_stop_public/config';
import {zipImage} from "@/webPublic/zyd_public/utils/handlePhoto"; import { zipImage } from '@/webPublic/zyd_public/utils/handlePhoto';
import { getToken } from '@/webPublic/one_stop_public/utils/token'; import { getToken } from '@/webPublic/one_stop_public/utils/token';
import { queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig'; import { queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig';
...@@ -14,7 +14,7 @@ export default class ImgUploadCom extends React.Component { ...@@ -14,7 +14,7 @@ export default class ImgUploadCom extends React.Component {
}; };
} }
triggerChange = changedValue => { triggerChange = (changedValue) => {
// Should provide an event to pass value to Form. // Should provide an event to pass value to Form.
const onChange = this.props.onChange; const onChange = this.props.onChange;
if (onChange) { if (onChange) {
...@@ -26,7 +26,7 @@ export default class ImgUploadCom extends React.Component { ...@@ -26,7 +26,7 @@ export default class ImgUploadCom extends React.Component {
// Should be a controlled component. // Should be a controlled component.
if ('value' in nextProps) { if ('value' in nextProps) {
const value = nextProps.value; const value = nextProps.value;
this.setState({url: value}); this.setState({ url: value });
} }
} }
...@@ -35,23 +35,34 @@ export default class ImgUploadCom extends React.Component { ...@@ -35,23 +35,34 @@ export default class ImgUploadCom extends React.Component {
message.success(`图片上传成功`); message.success(`图片上传成功`);
if (!('value' in this.props)) { if (!('value' in this.props)) {
this.setState({url: info.file.response}); this.setState({ url: info.file.response });
} }
this.triggerChange(info.file.response); this.triggerChange(info.file.response);
} else if (info.file.status === 'error') { } else if (info.file.status === 'error') {
message.error(`图片上传失败`); message.error(`图片上传失败`);
} }
}; };
changePos = obj => { changePos = (obj) => {
if (!('value' in this.props)) { if (!('value' in this.props)) {
this.setState({...obj}); this.setState({ ...obj });
} }
this.triggerChange({...obj}); this.triggerChange({ ...obj });
};
removePicture = (e) => {
if (e && e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
this.triggerChange('');
}; };
render() { render() {
const {json, disabled} = this.props; const {
const {url} = this.state; json,
disabled
} = this.props;
const { url } = this.state;
return ( return (
<Upload.Dragger <Upload.Dragger
disabled={disabled} disabled={disabled}
...@@ -73,16 +84,28 @@ export default class ImgUploadCom extends React.Component { ...@@ -73,16 +84,28 @@ export default class ImgUploadCom extends React.Component {
action={config.uploadUrl} action={config.uploadUrl}
onChange={this.changeUrl} onChange={this.changeUrl}
multiple={false} multiple={false}
style={{padding: 0}} style={{ padding: 0 }}>
>
{url ? ( {url ? (
<img src={queryFileUrl(url)} style={{ <Badge count={<Icon type="close-circle"
style={{ color: 'red' }}
onClick={this.removePicture}
/>}>
<img
src={queryFileUrl(url)}
style={{
height: json.height, height: json.height,
width: json.width, width: json.width,
maxWidth: '60vw', // 解决图片在移动端过宽的bug maxWidth: '60vw', // 解决图片在移动端过宽的bug
}}/> }}
/>
</Badge>
) : ( ) : (
<div style={{height: json.height, width: json.width}}/> <div
style={{
height: json.height,
width: json.width,
}}
/>
)} )}
</Upload.Dragger> </Upload.Dragger>
); );
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论