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",

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,7 +129,11 @@ 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 (['jpg', 'png', 'svg', 'jpeg'].includes(fileType)) {
+          setImgVisible(true)
+        } else {
           if (['xlsx', 'xls'].includes(fileType)) {
             downloadFile(file.sourcePath)
               .then(response => response.arrayBuffer())
@@ -142,8 +149,8 @@ const FileUpload = (props) => {
                 })
               })
           }
-        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>
   )