Skip to content

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

23680 求职创业补贴---，详情页资预览料图片可以自由缩放大小

上级 7d04a3f0
隐藏空白字符变更
内嵌 并排
正在显示 包含 212 行增加 和 233 行删除
one_stop_public/filePreview/index.jsx
浏览文件 @ 6f157c3f
......@@ -60,6 +60,8 @@ export default class index extends Component {
type = Array.isArray(type) && type.length && type[type.length - 1];
}
// return null;
return (
<>
{isShow ? (
......
one_stop_public/libs/UploadCom.js
浏览文件 @ 6f157c3f
// 图片上传组件
import React from 'react';
import {Button, Icon, message, Modal, Upload} from 'antd';
import {queryApiActionPath} from '../utils/queryConfig';
import { Button, Icon, message, Modal, Upload } from 'antd';
import { queryApiActionPath } from '../utils/queryConfig';
import config from '@/webPublic/one_stop_public/config';
import styles from './style.less';
import UploadComDiyForQnZy from '@/webPublic/one_stop_public/libs/UploadComDiyForQnZy';
import {getContainer} from "@/webPublic/one_stop_public/utils/utils";
import { getContainer } from '@/webPublic/one_stop_public/utils/utils';
import Viewer from 'react-viewer';
message.config({
top: 300,
})
top: 300,
});
export function checkIsImage(path) {
if (!path) {
return false;
}
let p = path.toLowerCase();
let find = ['.jpg', '.png', '.jpeg', '.bmp', '.gif', '.bmp', '.svg'].find(x => {
return path.indexOf(x) > -1;
});
return !!find;
if (!path) {
return false;
}
let p = path.toLowerCase();
let find = ['.jpg', '.png', '.jpeg', '.bmp', '.gif', '.bmp', '.svg'].find((x) => {
return path.indexOf(x) > -1;
});
return !!find;
}
export default function index(props) {
if (window.location.href.indexOf('jy/geren/subsidy') > -1) {
return <UploadComDiyForQnZy {...props} />;
} else {
return <UploadCom {...props} />;
}
if (window.location.href.indexOf('jy/geren/subsidy') > -1) {
return <UploadComDiyForQnZy {...props} />;
} else {
return <UploadCom {...props} />;
}
}
/**
......@@ -43,218 +45,202 @@ export default function index(props) {
* */
class UploadCom extends React.Component {
constructor(props) {
super(props);
const value = props.value || {};
this.state = {
files: value.files,
previewVisible: false,
previewImage: '',
};
this.otherProps = {};
if (props.json?.otherProps) {
this.otherProps = props.json?.otherProps;
try {
this.otherProps = new Function(this.otherProps)();
// console.log(this.otherProps);
} catch (e) {
}
}
}
constructor(props) {
super(props);
const value = props.value || {};
this.state = {
files: value.files,
previewVisible: false,
previewImage: '',
};
this.otherProps = {};
if (props.json?.otherProps) {
this.otherProps = props.json?.otherProps;
try {
this.otherProps = new Function(this.otherProps)();
// console.log(this.otherProps);
} catch (e) {}
}
}
triggerChange = changedValue => {
// Should provide an event to pass value to Form.
const onChange = this.props.onChange;
if (onChange) {
onChange(Object.assign({}, this.state, changedValue));
}
};
triggerChange = (changedValue) => {
// Should provide an event to pass value to Form.
const onChange = this.props.onChange;
if (onChange) {
onChange(Object.assign({}, this.state, changedValue));
}
};
//图片上传之前进行判断
beforeUpload = file => {
return this.isSize(file).then(res => {
message.info('正在上传中,请等待');
return true;
});
};
//图片上传之前进行判断
beforeUpload = (file) => {
return this.isSize(file).then((res) => {
message.info('正在上传中,请等待');
return true;
});
};
//检测尺寸
isSize = file => {
const {limitWarnningMessage} = this.otherProps;
return new Promise((resolve, reject) => {
let {width, height, widthMinusHeight} = this.otherProps.limitImageSize;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function () {
let valid = img.width >= width && img.height >= height;
if(!!widthMinusHeight && valid){
//检测尺寸
isSize = (file) => {
const { limitWarnningMessage } = this.otherProps;
return new Promise((resolve, reject) => {
let { width, height, widthMinusHeight } = this.otherProps.limitImageSize;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = img.width >= width && img.height >= height;
if (!!widthMinusHeight && valid) {
if (widthMinusHeight > 0) {
if (img.width - img.height < widthMinusHeight) {
// widthMinusHeight: number// 限制必须宽度大于高度 且 宽度 - 高度 >= widthMinusHeight
valid = false;
}
}
if (widthMinusHeight < 0) {
if (img.height - img.width < Math.abs(widthMinusHeight)) {
// widthMinusHeight: number// 限制必须高度大于宽度
valid = false;
}
}
}
valid ? resolve() : reject();
};
img.src = _URL.createObjectURL(file);
}).then(
() => {
return file;
},
() => {
message.error(file.name + limitWarnningMessage);
return Promise.reject();
},
);
};
if(widthMinusHeight > 0){
if((img.width - img.height) < widthMinusHeight){
// widthMinusHeight: number// 限制必须宽度大于高度 且 宽度 - 高度 >= widthMinusHeight
valid = false;
}
}
if(widthMinusHeight < 0){
if((img.height - img.width) < Math.abs(widthMinusHeight)){
// widthMinusHeight: number// 限制必须高度大于宽度
valid = false;
}
}
componentWillReceiveProps(nextProps) {
// Should be a controlled component.
if ('value' in nextProps) {
const value = nextProps.value;
this.setState(value);
}
}
}
valid ? resolve() : reject();
};
img.src = _URL.createObjectURL(file);
}).then(
() => {
return file;
},
() => {
message.error(
file.name + limitWarnningMessage,
);
return Promise.reject();
},
);
};
changeUrl = (info) => {
if (info.file.status === 'done') {
message.success(`${info.file.name} 上传成功`);
const files = this.state.files;
files.push({ path: info.file.response, name: info.file.name });
if (!('value' in this.props)) {
this.setState({ files });
}
this.triggerChange({ files });
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 上传失败`);
}
};
remove = (path) => {
const files = this.state.files;
for (var i = 0; i < files.length; i++) {
if (files[i].path == path) {
files.splice(i, 1);
break;
}
}
if (!('value' in this.props)) {
this.setState({ files });
}
this.triggerChange({ files });
};
componentWillReceiveProps(nextProps) {
// Should be a controlled component.
if ('value' in nextProps) {
const value = nextProps.value;
this.setState(value);
}
}
changeUrl = info => {
if (info.file.status === 'done') {
message.success(`${info.file.name} 上传成功`);
const files = this.state.files;
files.push({path: info.file.response, name: info.file.name});
if (!('value' in this.props)) {
this.setState({files});
}
this.triggerChange({files});
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 上传失败`);
}
};
remove = path => {
const files = this.state.files;
for (var i = 0; i < files.length; i++) {
if (files[i].path == path) {
files.splice(i, 1);
break;
}
}
if (!('value' in this.props)) {
this.setState({files});
}
this.triggerChange({files});
};
render() {
const {files, previewVisible, previewImage} = this.state;
const {isMultiple, accept, btnName, disabled} = this.props;
const props = {
name: 'file',
multiple: isMultiple,
accept: accept,
action: config.uploadUrl,
showUploadList: false,
onChange: this.changeUrl,
beforeUpload: this.otherProps?.limitImageSize ? this.beforeUpload : undefined,
};
return (
<div>
{' '}
<Upload {...props} disabled={disabled}>
{!disabled && (
<>
<Button>
<Icon type="upload"/>
{btnName ? btnName : '上传附件'}
</Button>
{
this.otherProps?.limitImageInfo &&
<div>
{this.otherProps?.limitImageInfo}
</div>
}
</>
)}
</Upload>
<ul className={styles.ulImageList}>
{(Array.isArray(files) && files || []).map(f => {
if (f.path && checkIsImage(f.path)) {
return (
<li key={f.path} className={styles.preview_img}>
<div className={styles.preview_div}>
<img
style={{width: '100px', height: 'auto'}}
className={styles.img}
src={queryApiActionPath() + f.path}
/>
<div
className={styles.mask}
onClick={() => {
// window.open(queryApiActionPath() + f.path);
this.setState({
render() {
const { files, previewVisible, previewImage, previewImageName } = this.state;
const { isMultiple, accept, btnName, disabled } = this.props;
const props = {
name: 'file',
multiple: isMultiple,
accept: accept,
action: config.uploadUrl,
showUploadList: false,
onChange: this.changeUrl,
beforeUpload: this.otherProps?.limitImageSize ? this.beforeUpload : undefined,
};
return (
<div>
{' '}
<Upload {...props} disabled={disabled}>
{!disabled && (
<>
<Button>
<Icon type="upload" />
{btnName ? btnName : '上传附件'}
</Button>
{this.otherProps?.limitImageInfo && <div>{this.otherProps?.limitImageInfo}</div>}
</>
)}
</Upload>
<ul className={styles.ulImageList}>
{((Array.isArray(files) && files) || []).map((f) => {
// console.log(f);
if (f.path && checkIsImage(f.path)) {
return (
<li key={f.path} className={styles.preview_img}>
<div className={styles.preview_div}>
<img
style={{ width: '100px', height: 'auto' }}
className={styles.img}
src={queryApiActionPath() + f.path}
/>
<div
className={styles.mask}
onClick={() => {
// window.open(queryApiActionPath() + f.path);
this.setState({
previewImage: queryApiActionPath() + f.path,
previewImageName : f.name,
previewVisible: true,
previewImage: queryApiActionPath() + f.path,
});
}}
>
<Icon type="eye" className={styles.icon_eye}/>
</div>
</div>
{!disabled && (
<Icon
style={{marginLeft: 10}}
type="delete"
onClick={this.remove.bind(this, f.path)}
/>
)}
</li>
);
}
return (
<li key={f.path}>
<a target="_blank" key={f.path} href={queryApiActionPath() + f.path}>
{f.name}
</a>{' '}
{!disabled && (
<Icon
style={{marginLeft: 10}}
type="delete"
onClick={this.remove.bind(this, f.path)}
/>
)}
</li>
);
})}
</ul>
<Modal
visible={previewVisible}
footer={null}
getContainer={getContainer}
onCancel={() => this.setState({previewVisible: false})}
width={'90vw'}
>
<div style={{
textAlign: 'center',
width: '100%',
}}>
<img alt="example" style={{
maxWidth: '1200px',
maxHeight: '700px',
height: 'auto',
}} src={previewImage}/>
</div>
</Modal>
</div>
);
}
}}>
<Icon type="eye" className={styles.icon_eye} />
</div>
</div>
{!disabled && (
<Icon
style={{ marginLeft: 10 }}
type="delete"
onClick={this.remove.bind(this, f.path)}
/>
)}
</li>
);
}
return (
<li key={f.path}>
<a target="_blank" key={f.path} href={queryApiActionPath() + f.path}>
{f.name}
</a>{' '}
{!disabled && (
<Icon
style={{ marginLeft: 10 }}
type="delete"
onClick={this.remove.bind(this, f.path)}
/>
)}
</li>
);
})}
</ul>
<Viewer
visible={previewVisible}
onClose={() => {
this.setState({ previewVisible: false });
}}
images={[
{
src: previewImage,
alt: previewImageName,
},
]}
/>
</div>
);
}
}
one_stop_public/tableCompon/index.jsx
浏览文件 @ 6f157c3f
......@@ -2100,15 +2100,6 @@ export default class tableCom extends Component {
cm = (
<ul className={styles.imageUl}>
{files.map((f, index2) => {
// if (f.path.indexOf('.png') != -1 || f.path.indexOf('.jpg') != -1) {
// return (
// <img
// key={index2}
// style={{ width: 100, height: 100 }}
// src={queryApiActionPath() + f.path}
// />
// );
// }
if (get === 'web' && !this.props.isPrint) {
return (
<li key={index2}>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论