图片上传组件预览

one_stop_public/filePreview/index.jsx

@@ -3,6 +3,8 @@
  */
 import React, { Component } from 'react';
 import { Modal, Popconfirm } from 'antd';
+import { checkIsImage } from '@/webPublic/one_stop_public/libs/UploadCom';
+
 const FileViewer = CLIENT_TYPE == 'mobile' ? null : require('react-file-viewer');
 
 export default class index extends Component {
@@ -12,6 +14,7 @@ export default class index extends Component {
       visible: false,
     };
   }
+
   showModal = () => {
     this.setState({
       visible: true,
@@ -33,66 +36,37 @@ export default class index extends Component {
     let { path, pathName } = this.props;
     window.open(path, '_blank');
   };
+
   render() {
     let { path, pathName, width, height } = this.props;
     const { visible } = this.state;
-		let isShow =
-			pathName?.indexOf('.pdf') !== -1 ||
-			// || pathName?.indexOf('.doc') !== -1
-			pathName?.indexOf('.mp3') !== -1 ||
-			pathName?.indexOf('.mp4') !== -1 ||
-			pathName?.indexOf('.csv') !== -1 ||
-			pathName?.indexOf('.png') !== -1 ||
-			pathName?.indexOf('.jpeg') !== -1 ||
-			pathName?.indexOf('.gif') !== -1 ||
-			pathName?.indexOf('.bmp') !== -1 ||
-			pathName?.indexOf('.jpg') !== -1;
+    let isShow = false;
     let type;
-		let isImg;
-		if (pathName?.indexOf('.pdf') !== -1) {
-			isShow = true;
-			isImg = false;
-			type = 'pdf';
-		} else if (pathName?.indexOf('.jpg') !== -1) {
-			isShow = true;
-			isImg = true;
-			type = 'jpg';
-		} else if (pathName?.indexOf('.mp3') !== -1) {
-			isShow = true;
-			isImg = false;
-			type = 'mp3';
-		} else if (pathName?.indexOf('.mp4') !== -1) {
-			isShow = true;
-			isImg = false;
-			type = 'mp4';
-		} else if (pathName?.indexOf('.csv') !== -1) {
-			isShow = true;
-			isImg = false;
-			type = 'csv';
-		} else if (pathName?.indexOf('.png') !== -1) {
-			isImg = true;
+    let isImg = checkIsImage(pathName);
+    if (isImg) {
       isShow = true;
-			type = 'png';
-		} else if (pathName?.indexOf('.gif') !== -1) {
-			isImg = true;
-			isShow = true;
-			type = 'gif';
-		} else if (pathName?.indexOf('.bmp') !== -1) {
-			isShow = true;
-			isImg = false;
-			type = 'bmp';
     } else {
-			isShow = false;
+      let find = ['.pdf', '.mp3', '.mp4', '.csv'].find((x) => {
+        return pathName.indexOf(x) > -1;
+      });
+      if (find) {
+        isShow = true;
       }
+    }
+    if(isShow){
+      type = pathName.split('.');
+      type = Array.isArray(type) && type.length && type[type.length - 1];
+    }
+
     return (
       <>
         {isShow ? (
           <Popconfirm
-						title="该附件支持预览,是否预览?"
+            title='该附件支持预览,是否预览?'
             onConfirm={this.download}
             onCancel={this.showModal}
-						okText="下载"
-						cancelText="预览">
+            okText='下载'
+            cancelText='预览'>
             {isImg ? (
               <img
                 style={{
@@ -103,13 +77,13 @@ export default class index extends Component {
                 alt={pathName}
               />
             ) : (
-							<a target="_blank" href={path}>
+              <a target='_blank' href={path}>
                 {pathName}
               </a>
             )}
           </Popconfirm>
         ) : (
-					<a target="_blank" href={path}>
+          <a target='_blank' href={path}>
             {pathName}
           </a>
         )}

one_stop_public/libs/UploadCom.js

@@ -10,7 +10,7 @@ export function checkIsImage(path){
     return false;
   }
   let p = path.toLowerCase();
-  let find = ['.jpg','.png', '.jpeg', '.bmp', '.gif'].find((x) => {
+  let find = ['.jpg','.png', '.jpeg', '.bmp', '.gif', '.bmp', '.svg'].find((x) => {
     return  path.indexOf(x) > -1;
   });
   return !!find;

one_stop_public/tableCompon/index.jsx

@@ -1562,7 +1562,7 @@ export default class tableCom extends Component {
           );
 
           break;
-        case 'ImgUploadCom':
+        case 'ImgUploadCom': // 图片上传组件
           if (value == null || value == '') {
             cm = <div style={{ width: json.width, height: json.height }} />;
           } else {