封面图增加缩略图功能

src/components/ImageLazy/index.tsx

@@ -1,58 +1,53 @@
-import React, { useCallback, useState } from "react";
-import styles from "./index.module.scss";
-import { baseURL } from "@/utils/http";
-import imgLoding from "@/assets/img/loading.gif";
-import imgErr from "@/assets/img/IMGerror.png";
-import { EyeOutlined } from "@ant-design/icons";
-import store from "@/store";
-import { Image } from "antd-mobile";
+import React, { useCallback, useState } from 'react'
+import styles from './index.module.scss'
+import { baseURL } from '@/utils/http'
+import imgLoding from '@/assets/img/loading.gif'
+import imgErr from '@/assets/img/IMGerror.png'
+import { EyeOutlined } from '@ant-design/icons'
+import store from '@/store'
+import { Image } from 'antd-mobile'
 
 type Props = {
-  width?: number | string;
-  height?: number | string;
-  src: string;
-  noLook?: boolean;
-  offline?: boolean;
-};
+  width?: number | string
+  height?: number | string
+  src: string
+  srcBig?: string
+  noLook?: boolean
+  offline?: boolean
+}
 
-function ImageLazy({
-  width = 100,
-  height = 100,
-  src,
-  noLook,
-  offline = false,
-}: Props) {
+function ImageLazy({ width = 100, height = 100, src, srcBig, noLook, offline = false }: Props) {
   // 默认不能预览图片，加载成功之后能预览
-  const [lookImg, setLookImg] = useState(false);
+  const [lookImg, setLookImg] = useState(false)
 
   // 图片加载完成
   const onLoad = useCallback(() => {
-    setLookImg(true);
-  }, []);
+    setLookImg(true)
+  }, [])
 
   // 点击预览图片
   const lookBigImg = useCallback(() => {
     store.dispatch({
-      type: "layout/lookBigImg",
-      payload: { url: offline ? src : baseURL + src, show: true },
-    });
-  }, [offline, src]);
+      type: 'layout/lookBigImg',
+      payload: { url: offline ? src : srcBig ? baseURL + srcBig : baseURL + src, show: true }
+    })
+  }, [offline, src, srcBig])
 
   return (
     <div className={styles.ImageLazy} style={{ width: width, height: height }}>
-      <div className="lazyBox">
+      <div className='lazyBox'>
         <Image
           lazy
           onLoad={onLoad}
-          src={src ? (offline ? src : baseURL + src) : ""}
-          placeholder={<img src={imgLoding} alt="" />}
-          fallback={<img src={imgErr} alt="" />}
-          fit="cover"
+          src={src ? (offline ? src : baseURL + src) : ''}
+          placeholder={<img src={imgLoding} alt='' />}
+          fallback={<img src={imgErr} alt='' />}
+          fit='cover'
         />
 
         {/* 图片预览 */}
         {noLook || !lookImg ? null : (
-          <div className="lookImg" onClick={lookBigImg}>
+          <div className='lookImg' onClick={lookBigImg}>
             <EyeOutlined rev={undefined} />
             &nbsp;
             <div>预览</div>
@@ -60,9 +55,9 @@ function ImageLazy({
         )}
       </div>
     </div>
-  );
+  )
 }
 
-const MemoImageLazy = React.memo(ImageLazy);
+const MemoImageLazy = React.memo(ImageLazy)
 
-export default MemoImageLazy;
+export default MemoImageLazy

src/components/MyTable/index.tsx

@@ -95,6 +95,7 @@ function MyTable({
               <ImageLazy
                 width={60}
                 height={60}
+                srcBig={item.thumbPc}
                 src={item[v[2]] || item.thumb}
                 offline={(item[v[2]] || item.thumb).includes('http')}
               />

src/components/ZupOne/index.tsx

@@ -55,7 +55,8 @@ function ZupOne(
 ) {
   const [fileUrl, setFileUrl] = useState({
     fileName: '',
-    filePath: ''
+    filePath: '',
+    thumb: '' //压缩图
   })
 
   const myInput = useRef<HTMLInputElement>(null)
@@ -108,6 +109,11 @@ function ZupOne(
           }
         }
 
+        if (filesInfo.size > 1 * 1024 * 1024) {
+          // 开启压缩图片
+          fd.append('isCompress', 'true')
+        }
+
         e.target.value = ''
 
         try {
@@ -126,9 +132,12 @@ function ZupOne(
   )
 
   // 让父组件调用的 回显 附件 地址
-  const setFileComFileFu = useCallback((valObj: { fileName: string; filePath: string }) => {
-    setFileUrl(valObj)
-  }, [])
+  const setFileComFileFu = useCallback(
+    (valObj: { fileName: string; filePath: string; thumb: string }) => {
+      setFileUrl(valObj)
+    },
+    []
+  )
 
   // 让父组件调用的返回 附件 名字和路径
   const fileComFileResFu = useCallback(() => {
@@ -201,13 +210,21 @@ function ZupOne(
       {/* 为图片的情况-------------- */}
       {myType === 'thumb' ? (
         <div className='file_img' hidden={fileUrl.filePath === ''}>
-          {fileUrl ? <ImageLazy width={100} height={100} src={fileUrl.filePath} noLook /> : null}
+          {fileUrl ? (
+            <ImageLazy
+              width={100}
+              height={100}
+              srcBig={fileUrl.filePath}
+              src={fileUrl.thumb}
+              noLook
+            />
+          ) : null}
 
           {/* 删除 */}
           <div className='file_closeBox' hidden={isLook}>
             <MyPopconfirm
               txtK='删除'
-              onConfirm={() => setFileUrl({ fileName: '', filePath: '' })}
+              onConfirm={() => setFileUrl({ fileName: '', filePath: '', thumb: '' })}
               Dom={<CloseOutlined rev={undefined} />}
             />
           </div>
@@ -254,7 +271,7 @@ function ZupOne(
           {isLook ? null : (
             <MyPopconfirm
               txtK='删除'
-              onConfirm={() => setFileUrl({ fileName: '', filePath: '' })}
+              onConfirm={() => setFileUrl({ fileName: '', filePath: '', thumb: '' })}
               Dom={<CloseOutlined className='clearCover' rev={undefined} />}
             />
           )}

src/pages/A1manage/A1add/index.tsx

@@ -64,7 +64,8 @@ function A1add({
     // 设置封面图
     ZupThumbRef.current?.setFileComFileFu({
       fileName: '',
-      filePath: info.thumb
+      thumb: info.thumb,
+      filePath: info.thumbPc
     })
 
     // 设置附件
@@ -136,7 +137,8 @@ function A1add({
       const obj = {
         ...values,
         id: isAudit ? null : editInfo.id > 0 ? editInfo.id : null,
-        thumb: coverUrl1.filePath,
+        thumb: coverUrl1.thumb,
+        thumbPc: coverUrl1.filePath,
         storageId,
         fileName,
         filePath

src/pages/A1manage/A1ying/A1Yadd.tsx

@@ -36,7 +36,8 @@ function A1Yadd({ type, id, closeFu, addTableFu, editTableFu, bookId }: Props) {
       // 设置封面图
       ZupThumbRef.current?.setFileComFileFu({
         fileName: '',
-        filePath: data.thumb
+        thumb: data.thumb,
+        filePath: data.thumbPc
       })
 
       // 设置附件
@@ -88,7 +89,8 @@ function A1Yadd({ type, id, closeFu, addTableFu, editTableFu, bookId }: Props) {
       const obj = {
         ...values,
         id: id > 0 ? id : null,
-        thumb: coverUrl1.filePath,
+        thumb: coverUrl1.thumb,
+        thumbPc: coverUrl1.filePath,
         fileName,
         filePath,
         type,

src/types/api/A1manage.d.ts

@@ -20,6 +20,7 @@ export type A1tableType = {
   storageId: string
   storageName: string
   thumb: string
+  thumbPc: string
   updateTime: string
   year: string
 }