fix: upload a image can clear other message

src/hooks/use-chunk-fetch.ts

@@ -0,0 +1,92 @@
+import qs from 'query-string';
+import { useEffect, useRef } from 'react';
+
+interface RequestConfig {
+  url: string;
+  handler: (data: any) => any;
+  beforeReconnect?: () => void;
+  params?: object;
+  contentType?: 'json' | 'text';
+}
+
+const useSetChunkFetch = () => {
+  const axiosToken = useRef<any>(null);
+  const requestConfig = useRef<any>({});
+
+  const readTextEventStreamData = async (
+    reader: any,
+    decoder: TextDecoder,
+    callback: (data: any) => void
+  ) => {
+    const { done, value } = await reader.read();
+
+    if (done) {
+      return;
+    }
+
+    let chunk = decoder.decode(value, { stream: true });
+    callback(chunk);
+    await readTextEventStreamData(reader, decoder, callback);
+  };
+
+  const fetchChunkRequest = async ({
+    url,
+    handler,
+    params = {}
+  }: RequestConfig) => {
+    axiosToken.current?.abort?.();
+    axiosToken.current = new AbortController();
+    try {
+      const response = await fetch(
+        `v1${url}?${qs.stringify({
+          ...params,
+          watch: true
+        })}`,
+        {
+          method: 'GET',
+          body: null,
+          headers: {
+            'Content-Type': 'application/octet-stream'
+          },
+          signal: axiosToken.current.signal
+        }
+      );
+      console.log('response============', response);
+      if (!response.ok) {
+        return;
+      }
+      const reader = response?.body?.getReader();
+      const decoder = new TextDecoder('utf-8');
+      await readTextEventStreamData(reader, decoder, handler);
+    } catch (error) {
+      // handle error
+    }
+
+    return axiosToken.current;
+  };
+
+  const setChunkFetch = (config: RequestConfig) => {
+    requestConfig.current = { ...config };
+    fetchChunkRequest(requestConfig.current);
+    return axiosToken;
+  };
+
+  useEffect(() => {
+    const handleUnload = () => {
+      axiosToken.current?.abort?.();
+    };
+
+    window.addEventListener('beforeunload', handleUnload);
+
+    return () => {
+      axiosToken.current?.abort?.();
+      window.removeEventListener('beforeunload', handleUnload);
+    };
+  }, []);
+
+  return {
+    setChunkFetch
+  };
+};
+
+export default useSetChunkFetch;

src/hooks/use-chunk-request.ts

@@ -172,7 +172,7 @@ const useSetChunkRequest = () => {
 
           let result = response;
           let cres = '';
-          console.log('chunkrequest============e==', e);
+          console.log('chunkrequest============e==', result);
           if (contentType === 'json') {
             const currentRes = sliceData(response, e.loaded, loadedSize);
             result = parseData(currentRes);
@@ -194,7 +194,6 @@ const useSetChunkRequest = () => {
         retryCount.current -= 1;
       }
     } catch (error) {
-      console.log('error=============', error);
       if (!axios.isCancel(error)) {
         setRequestReadyState(4);
         if (retryCount.current > 0) {

src/hooks/use-table-row-selection.ts

@@ -11,10 +11,15 @@ export default function useTableRowSelection() {
     setSelectedRowKeys([]);
   };
 
+  const removeSelectedKey = (rowKey: React.Key) => {
+    setSelectedRowKeys((keys) => keys.filter((key) => key !== rowKey));
+  };
+
   const rowSelection = {
     selectedRowKeys,
     clearSelections,
-    onChange: onSelectChange
+    onChange: onSelectChange,
+    removeSelectedKey
   };
 
   return rowSelection;