fix: 上传组件查看图片优化

package.json

 {
   "name": "panda-xform",
-  "version": "5.5.4",
-  "description": "5.5.4 隐藏显示后默认值不显示",
+  "version": "5.5.5",
+  "description": "5.5.5 上传组件查看图片优化",
   "keywords": [
     "panda-xform"
   ],
@@ -43,6 +43,7 @@
     "react-resizable": "^3.0.5",
     "react-signature-canvas": "^1.0.6",
     "react-svg": "15.1.9",
+    "react-viewer": "^3.2.2",
     "viewerjs": "^1.11.3",
     "viewerjs-react": "^1.0.2",
     "xlsx": "^0.18.5",
@@ -132,4 +133,4 @@
   "publishConfig": {
     "registry": "https://g.civnet.cn:4873"
   }
-}
\ No newline at end of file
+}

src/core/widgets/file/FileUpload/index.js

-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styles from './index.less'
 import { Upload, Button, message, Tabs } from 'antd'
 import { UploadOutlined, FileOutlined } from '@ant-design/icons'
 import FileViewer from 'react-file-viewer'
+import Viewer from 'react-viewer'
 import { uploadFileUrl, downloadFileUrl, downloadFile } from '../../../../apis/process'
 import { filenameVerification } from '../../../../utils'
 import Drag from '../../../components/Drag'
@@ -66,10 +67,12 @@ const FileUpload = (props) => {
   const { addons, value, schema, onChange } = props
   const { disabled, fileType, presetValue, placeholder, preview, download } = schema
 
+  const [imgVisible, setImgVisible] = useState(false)
   const [showList, setShowList] = useState([])
   const [visible, setVisible] = useState(false)
   const [showFile, setShowFile] = useState({ fileType: '', filePath: '' })
   const [workbook, setWorkbook] = useState({ SheetNames: [] })
+  const viewerRef = useRef(null)
 
   const showType = fileType === '图片' ? 'picture-card' : 'picture'
 
@@ -126,24 +129,28 @@ const FileUpload = (props) => {
     onPreview: async (file) => {
       if (!preview) return message.info('该附件禁止预览')
       let fileType = getFileType(file.name)
+      setShowFile({ name: file.name, fileType: fileType, filePath: file.url })
       if (fileType) {
-        if (['xlsx', 'xls'].includes(fileType)) {
-          downloadFile(file.sourcePath)
-            .then(response => response.arrayBuffer())
-            .then(buffer => {
-              const data = new Uint8Array(buffer);
-              const workbook = XLSX.read(data, { type: 'array' });
-              setWorkbook(workbook)
-              workbook?.SheetNames?.forEach(sheetName => {
-                const worksheet = workbook.Sheets[sheetName];
-                // 将工作表转换为 JSON 对象
-                const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, defval: '' });
-                console.log(sheetName, jsonData)
+        if (['jpg', 'png', 'svg', 'jpeg'].includes(fileType)) {
+          setImgVisible(true)
+        } else {
+          if (['xlsx', 'xls'].includes(fileType)) {
+            downloadFile(file.sourcePath)
+              .then(response => response.arrayBuffer())
+              .then(buffer => {
+                const data = new Uint8Array(buffer);
+                const workbook = XLSX.read(data, { type: 'array' });
+                setWorkbook(workbook)
+                workbook?.SheetNames?.forEach(sheetName => {
+                  const worksheet = workbook.Sheets[sheetName];
+                  // 将工作表转换为 JSON 对象
+                  const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, defval: '' });
+                  console.log(sheetName, jsonData)
+                })
               })
-            })
+          }
+          setVisible(true)
         }
-        setShowFile({ name: file.name, fileType: fileType, filePath: file.url })
-        setVisible(true)
       } else {
         message.info('不支持该类型预览')
       }
@@ -309,6 +316,11 @@ const FileUpload = (props) => {
       >
         {elemet()}
       </Drag>
+      <Viewer
+        visible={imgVisible}
+        onClose={() => setImgVisible(false)}
+        images={[{ src: showFile.filePath, alt: '' }]}
+      />
     </div>
   )