修改图片预览

one_stop_public/libs/UploadCom.js

-import React from "react";
-import { Button, Icon, message, Upload } from "antd";
-import { queryApiActionPath } from "../utils/queryConfig";
-import config from "@/webPublic/one_stop_public/config";
+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';
 
 export default class UploadCom extends React.Component {
 	constructor(props) {
@@ -9,6 +10,8 @@ export default class UploadCom extends React.Component {
 		const value = props.value || {};
 		this.state = {
 			files: value.files,
+			previewVisible: false,
+			previewImage: '',
 		};
 	}
 
@@ -56,7 +59,7 @@ export default class UploadCom extends React.Component {
 	};
 
 	render() {
-		const { files } = this.state;
+		const { files, previewVisible, previewImage } = this.state;
 		const { isMultiple, accept, btnName, disabled } = this.props;
 		const props = {
 			name: 'file',
@@ -83,10 +86,20 @@ export default class UploadCom extends React.Component {
 					{(files || []).map((f) => {
 						if ((f.path && f.path.indexOf('.png') !== -1) || f.path.indexOf('.jpg') !== -1) {
 							return (
-								<li key={f.path}>
-									<img style={{ width: 100, height: 100 }} src={queryApiActionPath() + f.path} onClick={() => {
-									  window.open(queryApiActionPath() + f.path);
-                  }}/>
+								<li key={f.path} className={styles.preview_img} style={{ position: 'relative' }}>
+									<img
+										style={{ width: 100, height: 100 }}
+										className={styles.img}
+										src={queryApiActionPath() + f.path}
+										onClick={() => {
+											// window.open(queryApiActionPath() + f.path);
+											this.setState({
+												previewVisible: true,
+												previewImage: queryApiActionPath() + f.path,
+											});
+										}}
+									/>
+									<Icon type="eye" className={styles.icon_eye} style={{}} />
 									{!disabled && (
 										<Icon
 											style={{ marginLeft: 10 }}
@@ -113,6 +126,12 @@ export default class UploadCom extends React.Component {
 						);
 					})}
 				</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/style.less

@@ -237,3 +237,20 @@
         visibility: hidden;
     }
 }
+
+.preview_img {
+    position: relative;
+    .img {
+        &:hover + .icon_eye {
+            display: block;
+        }
+    }
+    .icon_eye {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        color: #fff;
+        transform: translate(-50%, -50%);
+        display: none;
+    }
+}