1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import React from 'react';
import { Upload, message, Badge, Icon } 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';
import { queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig';
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 });
};
removePicture = (e) => {
if (e && e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
this.triggerChange('');
};
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 ? (
<Badge count={<Icon type="close-circle"
style={{ color: 'red' }}
onClick={this.removePicture}
/>}>
<img
src={queryFileUrl(url)}
style={{
height: json.height,
width: json.width,
maxWidth: '60vw', // 解决图片在移动端过宽的bug
}}
/>
</Badge>
) : (
<div
style={{
height: json.height,
width: json.width,
}}
/>
)}
</Upload.Dragger>
);
}
}