feat: 解决上传组件预览的问题

src/components/FileModal/index.tsx

@@ -115,25 +115,23 @@ export default function FileModal(props: iFileModalProps) {
     }
   }
 
-  const transformFile = (file: any) => {
-    file.url = OSSData.dir + file.name
-    return file
-  }
+
   // 上传前的回调
-  const beforeUpload = (file: any) => {
+  const beforeUpload = (file: any) => new Promise<File>((resolve, reject) => {
     const { UPLOAD_LIMIT } = consts
     const isLt30M = file.size / 1024 / 1024 < UPLOAD_LIMIT
     if (!isLt30M) {
       message.error("上传附件大小限制在30MB")
-      return false
+      reject()
     }
     const expire = parseInt(OSSData.expire) * 1000
     if (expire < Date.now()) {
       initOssData()
-      return false
+      reject()
     }
-    return true
-  }
+    file.url = OSSData.dir + file.name
+    resolve(file)
+  })
 
   // 移除文件
   const onRemove = (file: any) => {
@@ -193,11 +191,10 @@ export default function FileModal(props: iFileModalProps) {
               action={OSSData.host}
               multiple={true}
               onChange={onChange}
+              maxCount={10}
               beforeUpload={beforeUpload}
               data={getExtraData}
-              transformFile={transformFile}
               showUploadList={false}
-              // accept={consts.UPLOAD_WHITE}
               onRemove={onRemove}
             >
               <p className="ant-upload-drag-icon">

src/components/OssUpload/index.tsx

@@ -36,12 +36,8 @@ const UploadModal: React.FC<iUploadModalProps> = (props) => {
   }, [ props.visible ])
   // 上传文件改变时的状态
   const onChange = (info: UploadChangeParam) => {
-
-    console.log(info)
-
     const { status } = info.file
     if (status === 'done') {
-
       setFiles(info.fileList.map(item => ({ createTime: new Date(), filepath: item.url, filename: item.name })))
     } else if (status === 'error') {
       message.error(`${info.file.name} 上传失败`)
@@ -51,16 +47,12 @@ const UploadModal: React.FC<iUploadModalProps> = (props) => {
   }
   // 初始化、获取签名
   const initOssData = async () => {
-    try {
-      const { code = -1, data = {} } = await getSignature()
-      if (code === consts.RET_CODE.SUCCESS) {
-        setOssData({ ...OSSData, ...data })
-      } else {
-        message.error("获取签名失败，请联系管理员")
+    const { code = -1, data = {} } = await getSignature()
+    if (code === consts.RET_CODE.SUCCESS) {
+      setOssData({ ...OSSData, ...data })
+    } else {
+      message.error("获取签名失败，请联系管理员")
 
-      }
-    } catch (error) {
-      message.error(error)
     }
   }
 
@@ -75,27 +67,27 @@ const UploadModal: React.FC<iUploadModalProps> = (props) => {
   }
 
   // 上传前的回调
-  const beforeUpload = async (file: any) => {
+  const beforeUpload = (file: any) => new Promise<File>((resolve, reject) => {
     const { UPLOAD_LIMIT } = consts
     const isLt30M = file.size / 1024 / 1024 < UPLOAD_LIMIT
     if (!isLt30M) {
       message.error("上传附件大小限制在30MB")
-      return Promise.reject()
+      reject()
     }
     const expire = parseInt(OSSData.expire) * 1000
     if (expire < Date.now()) {
       initOssData()
-      return Promise.reject()
+      reject()
     }
 
     const reg = new RegExp(consts.UPLOAD_WHITE)
     if (!reg.test(file.name)) {
-      return Promise.reject()
+      reject()
     }
 
     file.url = OSSData.dir + file.name
-    return Promise.resolve(file)
-  }
+    resolve(file)
+  })
 
   // 移除文件
   const onRemove = (file: any) => {
@@ -106,16 +98,11 @@ const UploadModal: React.FC<iUploadModalProps> = (props) => {
     setFiles(newFiles)
   }
 
-  // const customRenderItem = (originNode: ReactElement, file: UploadFile, fileList?: object[]): React.ReactNode => {
-  //   console.log(originNode)
-
-  //   return originNode
-  // }
   return (
     <Modal
       {...otherProps}
       title="上传附件"
-      // getContainer={false}
+      getContainer={false}
       footer={
         <div className="pi-flex-row pi-justify-end">
           <ZhCloseButton onClick={() => onShow(false)} size="small" className="pi-mg-right-5">关闭</ZhCloseButton>
@@ -130,9 +117,11 @@ const UploadModal: React.FC<iUploadModalProps> = (props) => {
         onChange={onChange}
         beforeUpload={beforeUpload}
         data={getExtraData}
-        // itemRender={customRenderItem}
-        // accept={consts.UPLOAD_WHITE}
         onRemove={onRemove}
+        onPreview={(file) => {
+          window.open(consts.OSS_PATH.REVIEW + file.url)
+        }}
+
       >
         <p className="ant-upload-drag-icon">
           <InboxOutlined />