Skip to content

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

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

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