feat: pre check file with HEAD method

src/app/services/base.query.ts

@@ -27,9 +27,11 @@ const whiteList = [
   "createAdmin",
   "getBotRelatedChannels",
   "sendMessageByBot",
-  "getAgoraVoicingList"
+  "getAgoraVoicingList",
+  "preCheckFileFromUrl"
 ];
 const whiteList401 = ["getAgoraVoicingList"];
+const errorWhiteList = ["preCheckFileFromUrl"];
 const baseQuery = fetchBaseQuery({
   baseUrl: BASE_URL,
   prepareHeaders: (headers, { getState, endpoint }) => {
@@ -78,6 +80,7 @@ const baseQueryWithTokenCheck = async (args: any, api: any, extraOptions: any) =
   }
   if (result?.error) {
     console.error("api error", result.error, api.endpoint);
+    if (errorWhiteList.includes(api.endpoint)) return result;
     switch (result.error.originalStatus || result.error.status) {
       case "FETCH_ERROR":
         {
@@ -95,7 +98,7 @@ const baseQueryWithTokenCheck = async (args: any, api: any, extraOptions: any) =
           if (api.endpoint !== "login") {
             api.dispatch(resetAuthData());
             location.href = "/#/login";
-            toast.error("API Not Authenticated");
+            // toast.error("API Not Authenticated");
           }
         }
         break;
@@ -104,7 +107,7 @@ const baseQueryWithTokenCheck = async (args: any, api: any, extraOptions: any) =
         break;
       case 404:
         {
-          const whiteList404 = ["login", "getArchiveMessage"];
+          const whiteList404 = ["login", "getArchiveMessage", "preCheckFileFromUrl"];
           if (!whiteList404.includes(api.endpoint)) {
             toast.error("Request Not Found");
           }

src/app/services/message.ts

@@ -237,11 +237,19 @@ export const messageApi = createApi({
           // todo
         }
       }
-    })
+    }),
+    preCheckFileFromUrl: builder.query<void, string>({
+      query: (url) => ({
+        url,
+        method: "HEAD",
+        responseHandler: "text"
+      })
+    }),
   })
 });
 
 export const {
+  useLazyPreCheckFileFromUrlQuery,
   useLazyRemoveFavoriteQuery,
   useUnpinMessageMutation,
   useLazyGetFavoritesQuery,

src/common/component/FileBox/preview/Image.tsx

@@ -1,31 +1,57 @@
 import { FC, useEffect, useState } from "react";
 import clsx from "clsx";
 import { LineWobble } from "@uiball/loaders";
+import { useLazyPreCheckFileFromUrlQuery } from "../../../../app/services/message";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 interface Props {
   url: string;
   alt?: string;
 }
 
 const ImageBox: FC<Props> = ({ url, alt }) => {
-  const [status, setStatus] = useState<"loading" | "loaded" | "error">("loading");
+  const [loadFile, { error, isSuccess }] = useLazyPreCheckFileFromUrlQuery();
+  const [status, setStatus] = useState<"loading" | "loaded" | "error" | number>("loading");
 
   useEffect(() => {
-
-    const img = new Image();
-    img.onload = () => {
-      setStatus("loaded");
-    };
-    img.onerror = () => {
-      setStatus("error");
-    };
-    img.src = url;
+    if (url) {
+      loadFile(url);
+    }
   }, [url]);
+  useEffect(() => {
+    // 预检成功
+    if (isSuccess && url) {
+      const img = new Image();
+      img.onload = () => {
+        setStatus("loaded");
+      };
+      img.onerror = () => {
+        setStatus("error");
+      };
+      img.src = url;
+    }
+    // 预检失败
+    if (error) {
+      const errNum = (error as FetchBaseQueryError).status;
+      console.log("error num", errNum);
+      switch (errNum) {
+        case 404:
+          setStatus(404);
+          break;
+
+        default:
+          // setStatus("error");
+          break;
+      }
+    }
+  }, [isSuccess, error, url]);
+
 
   return (
     <div className={clsx("h-[218px] overflow-hidden flex-center", status == "error" && "bg-red-100 dark:bg-red-200/60")}>
       {status == "loaded" ? <img className="w-full h-full object-cover" src={url} alt={alt} /> : (
         status == "loading" ? <span><LineWobble color="rgb(21,91,117)" /></span> :
-          <span className="text-lg text-red-800">Load image error</span>
+
+          status == 404 ? <span className="text-lg text-orange-500">File not found, removed maybe</span> : <span className="text-lg text-red-800">Load image error</span>
       )}
     </div>
   );