Skip to content

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

20576 个人就业信息/求职创业补贴申报，201801010006 119242 上传图片加限制，跟签约派遣上传图片加限制一样

上级 dcb76fbd
隐藏空白字符变更
内嵌 并排
正在显示 包含 326 行增加 和 136 行删除
one_stop_public/libs/UploadCom.js
浏览文件 @ 1e2b8f2c
import React from 'react'; import React from "react";
import { Button, Icon, message, Upload, Modal } from 'antd'; import { Button, Icon, message, Modal, Upload } from "antd";
import { queryApiActionPath } from '../utils/queryConfig'; import { queryApiActionPath } from "../utils/queryConfig";
import config from '@/webPublic/one_stop_public/config'; import config from "@/webPublic/one_stop_public/config";
import styles from './style.less'; import styles from "./style.less";
import UploadComDiyForQnZy from "@/webPublic/one_stop_public/libs/UploadComDiyForQnZy";
export default class UploadCom extends React.Component {
constructor(props) {
super(props);
const value = props.value || {};
this.state = {
files: value.files,
previewVisible: false,
previewImage: '',
};
}
triggerChange = (changedValue) => { export default function index(props) {
// Should provide an event to pass value to Form. if (window.location.href.indexOf("jy/geren/subsidy") > -1) {
const onChange = this.props.onChange; return (<UploadComDiyForQnZy {...props} />);
if (onChange) { } else {
onChange(Object.assign({}, this.state, changedValue)); return <UploadCom {...props} />;
} }
}; }
class UploadCom extends React.Component {
constructor(props) {
super(props);
const value = props.value || {};
this.state = {
files: value.files,
previewVisible: false,
previewImage: ""
};
}
componentWillReceiveProps(nextProps) { triggerChange = (changedValue) => {
// Should be a controlled component. // Should provide an event to pass value to Form.
if ('value' in nextProps) { const onChange = this.props.onChange;
const value = nextProps.value; if (onChange) {
this.setState(value); onChange(Object.assign({}, this.state, changedValue));
} }
} };
changeUrl = (info) => { componentWillReceiveProps(nextProps) {
if (info.file.status === 'done') { // Should be a controlled component.
message.success(`${info.file.name} 上传成功`); if ("value" in nextProps) {
const files = this.state.files; const value = nextProps.value;
files.push({ path: info.file.response, name: info.file.name }); this.setState(value);
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() { changeUrl = (info) => {
const { files, previewVisible, previewImage } = this.state; if (info.file.status === "done") {
const { isMultiple, accept, btnName, disabled } = this.props; message.success(`${info.file.name} 上传成功`);
const props = { const files = this.state.files;
name: 'file', files.push({ path: info.file.response, name: info.file.name });
multiple: isMultiple, if (!("value" in this.props)) {
accept: accept, this.setState({ files });
action: config.uploadUrl, }
showUploadList: false, this.triggerChange({ files });
onChange: this.changeUrl, } else if (info.file.status === "error") {
}; message.error(`${info.file.name} 上传失败`);
console.log('---------asdasd-------', this.props, this.state); }
};
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 });
};
return ( render() {
<div> const { files, previewVisible, previewImage } = this.state;
{' '} const { isMultiple, accept, btnName, disabled } = this.props;
<Upload {...props} disabled={disabled}> const props = {
{!disabled && ( name: "file",
<Button> multiple: isMultiple,
<Icon type="upload" /> accept: accept,
{btnName ? btnName : '上传附件'} action: config.uploadUrl,
</Button> showUploadList: false,
)} onChange: this.changeUrl
</Upload> };
<ul style={{ paddingLeft: 8, display: 'flex' }}> console.log("---------asdasd-------", this.props, this.state);
{(files || []).map((f) => { return (
if ((f.path && f.path.indexOf('.png') !== -1) || f.path.indexOf('.jpg') !== -1) { <div>
return ( {" "}
<li key={f.path} className={styles.preview_img}> <Upload {...props} disabled={disabled}>
<div className={styles.preview_div}> {!disabled && (
<img <Button>
style={{ width: 100, height: 100 }} <Icon type="upload" />
className={styles.img} {btnName ? btnName : "上传附件"}
src={queryApiActionPath() + f.path} </Button>
/> )}
<div </Upload>
className={styles.mask} <ul style={{ paddingLeft: 8, display: "flex" }}>
onClick={() => { {(files || []).map((f) => {
// window.open(queryApiActionPath() + f.path); if ((f.path && f.path.indexOf(".png") !== -1) || f.path.indexOf(".jpg") !== -1) {
this.setState({ return (
previewVisible: true, <li key={f.path} className={styles.preview_img}>
previewImage: queryApiActionPath() + f.path, <div className={styles.preview_div}>
}); <img
}}> style={{ width: 100, height: 100 }}
<Icon type="eye" className={styles.icon_eye} /> className={styles.img}
</div> src={queryApiActionPath() + f.path}
</div> />
{!disabled && ( <div
<Icon className={styles.mask}
style={{ marginLeft: 10 }} onClick={() => {
type="delete" // window.open(queryApiActionPath() + f.path);
onClick={this.remove.bind(this, f.path)} this.setState({
/> previewVisible: true,
)} previewImage: queryApiActionPath() + f.path
</li> });
); }}>
} <Icon type="eye" className={styles.icon_eye} />
return ( </div>
<li key={f.path}> </div>
<a target="_blank" key={f.path} href={queryApiActionPath() + f.path}> {!disabled && (
{f.name} <Icon
</a>{' '} style={{ marginLeft: 10 }}
{!disabled && ( type="delete"
<Icon onClick={this.remove.bind(this, f.path)}
style={{ marginLeft: 10 }} />
type="delete" )}
onClick={this.remove.bind(this, f.path)} </li>
/> );
)} }
</li> return (
); <li key={f.path}>
})} <a target="_blank" key={f.path} href={queryApiActionPath() + f.path}>
</ul> {f.name}
<Modal </a>{" "}
visible={previewVisible} {!disabled && (
footer={null} <Icon
onCancel={() => this.setState({ previewVisible: false })}> style={{ marginLeft: 10 }}
<img alt="example" style={{ width: '100%' }} src={previewImage} /> type="delete"
</Modal> onClick={this.remove.bind(this, f.path)}
</div> />
); )}
} </li>
);
})}
</ul>
<Modal
visible={previewVisible}
footer={null}
onCancel={() => this.setState({ previewVisible: false })}>
<img alt="example" style={{ width: "100%" }} src={previewImage} />
</Modal>
</div>
);
}
} }
one_stop_public/libs/UploadComDiyForQnZy.js 0 → 100644
浏览文件 @ 1e2b8f2c
import React from "react";
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";
// 为黔南职院单独写的 上传组件 用于 bug 20576 个人就业信息/求职创业补贴申报，201801010006 119242 上传图片加限制，跟签约派遣上传图片加限制一样
// 后续考虑修改 一站式组件 让组件支持所有功能
export default class UploadComDiyForQnZy extends React.Component {
constructor(props) {
super(props);
const value = props.value || {};
this.state = {
files: value.files,
previewVisible: false,
previewImage: '',
};
}
//图片上传之前进行判断
beforeUpload = (file) => {
const isSize = this.isSize(file);
return isSize;
};
//检测尺寸
isSize = (file) => {
return new Promise((resolve, reject) => {
let width = 1080; //宽高限制为1080 * 1080 原来为2400 * 2400
let height = 1080;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = img.width >= width && img.height >= height;
valid ? resolve() : reject();
};
img.src = _URL.createObjectURL(file);
}).then(
() => {
return file;
},
() => {
message.error(file.name + '图片尺寸不符合要求，需要上传高清图像 1080像素及以上,请修改后重新上传！');
return Promise.reject();
},
);
};
triggerChange = (changedValue) => {
// Should provide an event to pass value to Form.
const onChange = this.props.onChange;
if (onChange) {
onChange(Object.assign({}, this.state, changedValue));
}
};
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.beforeUpload,
};
console.log('---------asdasd-------', this.props, this.state);
return (
<div>
{' '}
<Upload {...props} disabled={disabled}>
{!disabled && (
<>
<Button>
<Icon type="upload" />
{btnName ? btnName : '上传附件'}
</Button>
<div>
（注：必须上传高清扫描件,图像高至少是1080px，宽至少是1080px）
</div>
</>
)}
</Upload>
<ul style={{ paddingLeft: 8, display: 'flex' }}>
{(files || []).map((f) => {
if ((f.path && f.path.indexOf('.png') !== -1) || f.path.indexOf('.jpg') !== -1) {
return (
<li key={f.path} className={styles.preview_img}>
<div className={styles.preview_div}>
<img
style={{ width: 100, height: 100 }}
className={styles.img}
src={queryApiActionPath() + f.path}
/>
<div
className={styles.mask}
onClick={() => {
// window.open(queryApiActionPath() + f.path);
this.setState({
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}
onCancel={() => this.setState({ previewVisible: false })}>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
);
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论