feat: gif 格式图片上传 & 修复某些情况下上传图片报错 #285

Mereithhh · May 5, 2023 · 43f84e6 · 43f84e6
1 parent 24b7e5f
commit 43f84e6
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 43 deletions.
diff --git a/packages/admin/src/components/UrlFormItem/index.tsx b/packages/admin/src/components/UrlFormItem/index.tsx
@@ -77,13 +77,13 @@ export default function (props: {
                   }
                 }}
                 url={dest}
-                accept=".png,.jpg,.jpeg,.webp,.jiff"
+                accept=".png,.jpg,.jpeg,.webp,.jiff,.gif"
               />
             </div>
           </div>
         }
         rules={props.required ? [{ required: true, message: '这是必填项' }] : undefined}
-      ></ProFormText>
+      />
     </>
   );
 }
diff --git a/packages/admin/src/pages/Static/img/index.tsx b/packages/admin/src/pages/Static/img/index.tsx
@@ -18,7 +18,7 @@ import { createPortal } from 'react-dom';
 import { history, useModel } from 'umi';
 import TipTitle from '../../../components/TipTitle';
 import { useTab } from '../../../services/van-blog/useTab';
-import { StaticItem } from '../type';
+import type { StaticItem } from '../type';
 import { copyImgLink, downloadImg, getImgLink, mergeMetaInfo } from './tools';
 const MENU_ID = 'static-img';
 export const errorImg =
@@ -221,7 +221,7 @@ const ImgPage = () => {
               fetchData();
             }}
             url="/api/admin/img/upload?withWaterMark=true"
-            accept=".png,.jpg,.jpeg,.webp,.jiff"
+            accept=".png,.jpg,.jpeg,.webp,.jiff,.gif"
           />
           <UploadBtn
             setLoading={setLoading}
@@ -237,7 +237,7 @@ const ImgPage = () => {
               fetchData();
             }}
             url="/api/admin/img/upload?withWaterMark=true"
-            accept=".png,.jpg,.jpeg,.webp,.jiff"
+            accept=".png,.jpg,.jpeg,.webp,.jiff,.gif"
           />
         </Space>
       }

diff --git a/packages/server/src/provider/static/picgo.provider.ts b/packages/server/src/provider/static/picgo.provider.ts
@@ -32,7 +32,6 @@ export class PicgoProvider {
     const staticSetting = await this.getSetting();
     const picgoConfig = staticSetting?.picgoConfig;
     const plugins = staticSetting?.picgoPlugins;
-
     if (picgoConfig) {
       this.picgo.setConfig(picgoConfig);
     }
@@ -68,7 +67,11 @@ export class PicgoProvider {
     } catch (err) {
       throw err;
     } finally {
-      fs.rmSync(srcPath);
+      try {
+        fs.rmSync(srcPath);
+      } catch (err) {
+        // console.log(err);
+      }
     }
     return {
       meta,

diff --git a/packages/server/src/provider/static/static.provider.ts b/packages/server/src/provider/static/static.provider.ts
@@ -53,35 +53,44 @@ export class StaticProvider {
     updateConfig?: UploadConfig,
   ) {
     const { buffer } = file;
+    const arr = file.originalname.split('.');
+    const fileType = arr[arr.length - 1];
     let buf = buffer;
     let currentSign = encryptFileMD5(buf);
     const staticConfigInDB = await this.settingProvider.getStaticSetting();
+    let compressSuccess = true;
     if (type == 'img') {
-
-      // 用加过水印的 buf 做计算，看看是不是有文件的。
-      if (updateConfig && updateConfig.withWaterMark) {
-        // 双保险，只有这里开启水印并且设置中也开启了才有效。
-        const waterMarkConfigInDB =
-          staticConfigInDB;
-        if (
-          waterMarkConfigInDB &&
-          checkTrue(waterMarkConfigInDB?.enableWaterMark)
-        ) {
-
-          const waterMarkText =
-            updateConfig.waterMarkText || waterMarkConfigInDB.waterMarkText;
-          if (waterMarkText && waterMarkText.trim() !== '') {
-            buf = await addWaterMarkToIMG(buffer, waterMarkText);
-            currentSign = encryptFileMD5(buf);
+      try {
+        // 用加过水印的 buf 做计算，看看是不是有文件的。
+        if (updateConfig && updateConfig.withWaterMark && fileType != 'gif') {
+          // 双保险，只有这里开启水印并且设置中也开启了才有效。
+          const waterMarkConfigInDB = staticConfigInDB;
+          if (
+            waterMarkConfigInDB &&
+            checkTrue(waterMarkConfigInDB?.enableWaterMark)
+          ) {
+            const waterMarkText =
+              updateConfig.waterMarkText || waterMarkConfigInDB.waterMarkText;
+            if (waterMarkText && waterMarkText.trim() !== '') {
+              buf = await addWaterMarkToIMG(buffer, waterMarkText);
+              currentSign = encryptFileMD5(buf);
+            }
           }
         }
-
+      } catch (err) {
+        // console.log(err);
       }
+
       if (checkTrue(staticConfigInDB.enableWebp)) {
-        buf = await compressImgToWebp(buf);
-        currentSign = encryptFileMD5(buf);
+        try {
+          buf = await compressImgToWebp(buf);
+          currentSign = encryptFileMD5(buf);
+        } catch (err) {
+          // console.log(err);
+          compressSuccess = false;
+        }
       }
-      
+
       const hasFile = await this.getOneBySign(currentSign);
 
       if (hasFile) {
@@ -90,17 +99,19 @@ export class StaticProvider {
           isNew: false,
         };
       }
-
     }
-    const arr = file.originalname.split('.');
-    const fileType = arr[arr.length - 1];
+
     const pureFileName = arr.slice(0, arr.length - 1).join('.');
     let fileName = currentSign + '.' + file.originalname;
     if (type == 'customPage') {
       fileName = customPathname + '/' + file.originalname;
     }
-    if (type == "img" &&  checkTrue(staticConfigInDB.enableWebp)) {
-      fileName = currentSign + "." + pureFileName + '.webp';
+    if (
+      type == 'img' &&
+      checkTrue(staticConfigInDB.enableWebp) &&
+      compressSuccess
+    ) {
+      fileName = currentSign + '.' + pureFileName + '.webp';
     }
     const realPath = await this.saveFile(
       fileType,

diff --git a/packages/server/src/utils/webp.ts b/packages/server/src/utils/webp.ts
@@ -1,19 +1,15 @@
-import { execSync } from "child_process";
-import { writeFileSync,readFileSync ,rmSync} from "fs";
-export const compressImgToWebp = async (
-  srcImage: Buffer,
-) => {
+import { execSync } from 'child_process';
+import { writeFileSync, readFileSync, rmSync } from 'fs';
+export const compressImgToWebp = async (srcImage: Buffer) => {
   const filenameTemp = `temp${Date.now()}`;
-  const p = `/tmp/${filenameTemp}`
-  const o = `/tmp/${filenameTemp}.webp`
-  writeFileSync(p,srcImage);
+  const p = `/tmp/${filenameTemp}`;
+  const o = `/tmp/${filenameTemp}.webp`;
+  writeFileSync(p, srcImage);
 
   execSync(`cwebp -q 80 ${p} -o ${o}`);
 
-  const f =  readFileSync(o);
+  const f = readFileSync(o);
   rmSync(p);
   rmSync(o);
   return f;
-
 };
-