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";
import styles from "./style.less";
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) {
if (window.location.href.indexOf("jy/geren/subsidy") > -1) {
......@@ -79,7 +90,6 @@ class UploadCom extends React.Component {
showUploadList: false,
onChange: this.changeUrl
};
console.log("---------asdasd-------", this.props, this.state);
return (
<div>
{" "}
......@@ -93,7 +103,7 @@ class UploadCom extends React.Component {
</Upload>
<ul style={{ paddingLeft: 8, display: "flex" }}>
{(files || []).map((f) => {
if ((f.path && f.path.indexOf(".png") !== -1) || f.path.indexOf(".jpg") !== -1) {
if (f.path && checkIsImage(f.path)) {
return (
<li key={f.path} className={styles.preview_img}>
<div className={styles.preview_div}>
......@@ -144,9 +154,9 @@ class UploadCom extends React.Component {
visible={previewVisible}
footer={null}
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>
</div>
);
......
one_stop_public/libs/UploadComDiyForQnZy.js
浏览文件 @ fccb60ca
......@@ -3,25 +3,28 @@ 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 { checkIsImage } from "./UploadCom";
// 为黔南职院单独写的 上传组件 用于 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: '',
};
}
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;
return this.isSize(file).then((res) => {
message.info("正在上传中,请等待");
return true;
});
};
//检测尺寸
......@@ -36,146 +39,145 @@ export default class UploadComDiyForQnZy extends React.Component {
valid ? resolve() : reject();
};
img.src = _URL.createObjectURL(file);
}).then(
() => {
}).then(() => {
return file;
},
() => {
message.error(file.name + '图片尺寸不符合要求，需要上传高清图像 1080像素及以上,请修改后重新上传！');
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));
}
};
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);
}
}
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 });
};
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);
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
};
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>
);
}
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 && checkIsImage(f.path)) {
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}
width={'90vw'}
onCancel={() => this.setState({ previewVisible: false })}>
<img alt="example" style={{ width: "100%" }} src={previewImage} />
</Modal>
</div>
);
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论