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 { Button, Icon, message, Upload, Modal } from 'antd';
import { queryApiActionPath } from '../utils/queryConfig';
import config from '@/webPublic/one_stop_public/config';
import styles from './style.less';
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";
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) => {
// Should provide an event to pass value to Form.
const onChange = this.props.onChange;
if (onChange) {
onChange(Object.assign({}, this.state, changedValue));
}
};
export default function index(props) {
if (window.location.href.indexOf("jy/geren/subsidy") > -1) {
return (<UploadComDiyForQnZy {...props} />);
} else {
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) {
// Should be a controlled component.
if ('value' in nextProps) {
const value = nextProps.value;
this.setState(value);
}
}
triggerChange = (changedValue) => {
// Should provide an event to pass value to Form.
const onChange = this.props.onChange;
if (onChange) {
onChange(Object.assign({}, this.state, changedValue));
}
};
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);
}
}
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,
};
console.log('---------asdasd-------', this.props, this.state);
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 });
};
return (
<div>
{' '}
<Upload {...props} disabled={disabled}>
{!disabled && (
<Button>
<Icon type="upload" />
{btnName ? btnName : '上传附件'}
</Button>
)}
</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>
);
}
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
};
console.log("---------asdasd-------", this.props, this.state);
return (
<div>
{" "}
<Upload {...props} disabled={disabled}>
{!disabled && (
<Button>
<Icon type="upload" />
{btnName ? btnName : "上传附件"}
</Button>
)}
</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>
);
}
}
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论