Skip to content

W
WebPublic
提交 8556bda0 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

34330 【兴仁市】离校管理系统-离校查询与统计-毕业生领取统计，点击回执人数进入已回执人数，再点击查看附件，有个多余的叉号，账号xrmzzyAdmin24，密码xrmzzyAdmin@123

上级 ba1a5ebc
隐藏空白字符变更
内嵌 并排
正在显示 包含 118 行增加 和 111 行删除
one_stop_public/libs/ImgUploadCom.jsx
浏览文件 @ 8556bda0
...@@ -6,116 +6,115 @@ import { getToken } from '@/webPublic/one_stop_public/utils/token'; ...@@ -6,116 +6,115 @@ 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';
import { import {
getSassApiHeader, getSassApiHeader,
getSysCode getSysCode,
} from '@/webPublic/one_stop_public/2023yunshangguizhou/utils'; } from '@/webPublic/one_stop_public/2023yunshangguizhou/utils';
export default class ImgUploadCom extends React.Component { export default class ImgUploadCom extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const value = props.value; const value = props.value;
this.state = { this.state = {
url: value, url: value,
}; };
} }
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) {
onChange(changedValue); onChange(changedValue);
} }
}; };
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
// 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 });
} }
} }
changeUrl = (info, key) => { changeUrl = (info, key) => {
if (info.file.status === 'done') { if (info.file.status === 'done') {
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) => { removePicture = (e) => {
if (e && e.stopPropagation) { if (e && e.stopPropagation) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
} }
this.triggerChange(''); this.triggerChange('');
}; };
getImageWidthAndHeight = (file) => { // 解决禅道任务 2006 评奖评优管理头像上传限制优化 getImageWidthAndHeight = (file) => { // 解决禅道任务 2006 评奖评优管理头像上传限制优化
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let _URL = window.URL || window.webkitURL; let _URL = window.URL || window.webkitURL;
let image = new Image(); let image = new Image();
image.src = _URL.createObjectURL(file); image.src = _URL.createObjectURL(file);
image.onload = function () { image.onload = function() {
resolve({ resolve({
width: image.width, width: image.width,
height: image.height, height: image.height,
}); });
}; };
}); });
} };
giveMessage = () => { giveMessage = () => {
const { otherProps = {} } = this.props; const { otherProps = {} } = this.props;
Modal.warning({ Modal.warning({
title: '图片限制', title: '图片限制',
content: otherProps.limitMessage || '图片格式错误!', content: otherProps.limitMessage || '图片格式错误!',
okText: '确定', okText: '确定',
}); });
} };
render() { render() {
const { json, disabled, otherProps } = this.props; const { json, disabled, otherProps } = this.props;
const { url } = this.state; const { url } = this.state;
return ( return (
<Upload.Dragger <Upload.Dragger
disabled={disabled} disabled={disabled}
accept={otherProps.accept || 'image/*'} accept={otherProps.accept || 'image/*'}
url={url} url={url}
headers={getSassApiHeader()} headers={getSassApiHeader()}
data={{ data={{
token: getToken(), token: getToken(),
}} }}
beforeUpload={(file) => { beforeUpload={(file) => {
if(otherProps){ if (otherProps) {
if(otherProps.limitFileType && Array.isArray(otherProps.limitFileType)){ // 限制文件类型 if (otherProps.limitFileType && Array.isArray(otherProps.limitFileType)) { // 限制文件类型
let fileType = file.name.split('.').pop(); let fileType = file.name.split('.').pop();
if(!otherProps.limitFileType.includes(fileType)){ if (!otherProps.limitFileType.includes(fileType)) {
this.giveMessage(); this.giveMessage();
return false; return false;
} }
} }
if(otherProps.limitWidth || otherProps.limitHeight){ //限制上传图片的宽高. 解决禅道任务 2006 if (otherProps.limitWidth || otherProps.limitHeight) { //限制上传图片的宽高. 解决禅道任务 2006
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.getImageWidthAndHeight(file).then((res) => { this.getImageWidthAndHeight(file).then((res) => {
if(otherProps.limitWidth && res.width !== otherProps.limitWidth){ if (otherProps.limitWidth && res.width !== otherProps.limitWidth) {
this.giveMessage(); this.giveMessage();
reject(false); reject(false);
return false; return false;
} }
if(otherProps.limitHeight && res.height !== otherProps.limitHeight){ if (otherProps.limitHeight && res.height !== otherProps.limitHeight) {
this.giveMessage(); this.giveMessage();
reject(false); reject(false);
return false; return false;
...@@ -127,39 +126,47 @@ export default class ImgUploadCom extends React.Component { ...@@ -127,39 +126,47 @@ export default class ImgUploadCom extends React.Component {
} }
return zipImage(file, 4); return zipImage(file, 4);
// 图片压缩函数. 超过fileSizeLimitMb兆的图片 直接压缩成原来的 30% 如果后续有其他需求考虑 做成全局配置项 配置可以压缩的图片的范围 // 图片压缩函数. 超过fileSizeLimitMb兆的图片 直接压缩成原来的 30% 如果后续有其他需求考虑 做成全局配置项 配置可以压缩的图片的范围
// 禅道bug 23185 // 禅道bug 23185
}} }}
showUploadList={false} showUploadList={false}
name="file" name='file'
action={config.uploadUrl} action={config.uploadUrl}
onChange={this.changeUrl} onChange={this.changeUrl}
multiple={false} multiple={false}
style={{ padding: 0 }}> style={{ padding: 0 }}>
{url ? ( {url ? (
<Badge disabled ? <img
count={ src={queryFileUrl(url)}
<Icon type="close-circle" style={{ color: 'red' }} onClick={this.removePicture} /> style={{
}> height: json.height,
<img width: json.width,
src={queryFileUrl(url)} maxWidth: '60vw', // 解决图片在移动端过宽的bug
style={{ }}
height: json.height, /> :
width: json.width, <Badge
maxWidth: '60vw', // 解决图片在移动端过宽的bug count={
}} <Icon type='close-circle' style={{ color: 'red' }} onClick={this.removePicture} />
/> }>
</Badge> <img
) : ( src={queryFileUrl(url)}
<div style={{
style={{ height: json.height,
height: json.height, width: json.width,
width: json.width, maxWidth: '60vw', // 解决图片在移动端过宽的bug
}} }}
/> />
)} </Badge>
</Upload.Dragger> ) : (
); <div
} style={{
height: json.height,
width: json.width,
}}
/>
)}
</Upload.Dragger>
);
}
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论