fix: added forceUploadOriginImage to force specify whether to enable image compression

client/web/src/components/ChatBox/ChatInputBox/utils.tsx

@@ -1,6 +1,7 @@
 import { closeModal, openModal } from '@/components/Modal';
 import { ImageUploadPreviewer } from '@/components/modals/ImageUploadPreviewer';
 import { compressImage, fileToDataUrl } from '@/utils/file-helper';
+import { canImageCompression } from '@/utils/image-helper';
 import React from 'react';
 import { uploadFile } from 'tailchat-shared';
 
@@ -17,6 +18,9 @@ export function uploadMessageImage(image: File): Promise<{
       const key = openModal(
         <ImageUploadPreviewer
           imageUrl={imageLocalUrl}
+          forceUploadOriginImage={
+            canImageCompression(image.type) ? undefined : true
+          }
           onCancel={() => {
             closeModal(key);
           }}

client/web/src/components/modals/ImageUploadPreviewer.tsx

@@ -12,6 +12,12 @@ interface ImageSize {
 
 interface ImageUploadPreviewerProps {
   imageUrl: string;
+  /**
+   * 是否强制指定是否上传原图
+   *
+   * 如果传入undefined则视为用户自行选择
+   */
+  forceUploadOriginImage?: boolean;
   onConfirm: (imageUploadInfo: {
     size: ImageSize;
     uploadOriginImage: boolean;
@@ -20,9 +26,11 @@ interface ImageUploadPreviewerProps {
 }
 export const ImageUploadPreviewer: React.FC<ImageUploadPreviewerProps> =
   React.memo((props) => {
-    const { imageUrl } = props;
+    const { imageUrl, forceUploadOriginImage } = props;
     const imageSizeRef = useRef<ImageSize>({ width: 0, height: 0 });
-    const [uploadOriginImage, setUploadOriginImage] = useState(false);
+    const [uploadOriginImage, setUploadOriginImage] = useState(
+      forceUploadOriginImage ?? false
+    );
 
     const [{ loading }, handleConfirm] = useAsyncFn(async () => {
       if (
@@ -93,6 +101,7 @@ export const ImageUploadPreviewer: React.FC<ImageUploadPreviewerProps> =
             <div className="w-full">
               <div className="text-left">
                 <Switch
+                  disabled={typeof forceUploadOriginImage !== 'undefined'}
                   checked={uploadOriginImage}
                   onChange={(checked) => setUploadOriginImage(checked)}
                 />

client/web/src/utils/image-helper.ts

@@ -57,3 +57,14 @@ export async function fetchImagePrimaryColor(imageUrl: string) {
     a,
   };
 }
+
+/**
+ * 判断传入的文件类型是否可以进行图片压缩
+ */
+export function canImageCompression(imageType: string): boolean {
+  if (['image/gif'].includes(imageType)) {
+    return false;
+  }
+
+  return true;
+}