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 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; } 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: '', }; this.otherProps = {}; console.log(props); 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)); } }; //图片上传之前进行判断 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 } = this.otherProps.limitImageSize; 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 + limitWarnningMessage, ); return Promise.reject(); }, ); }; 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> )} </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: '100px', height: 'auto' }} 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 })} width={'90vw'} > <img alt="example" style={{ width: '100%', height: 'auto' }} src={previewImage} /> </Modal> </div> ); } }