增加上传附件--取消上传功能

houtai/src/components/UpAsyncLoding/index.module.scss

@@ -2,7 +2,7 @@
   opacity: 0;
   pointer-events: none;
   position: fixed;
-  z-index: 9997;
+  z-index: 10000;
   top: 0;
   left: 0;
   width: 100%;
@@ -32,5 +32,12 @@
 
     }
 
+    .closeUpBtn {
+      position: absolute;
+      top: 70%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
   }
 }

houtai/src/components/UpAsyncLoding/index.tsx

@@ -1,11 +1,36 @@
-import React from "react";
+import { RootState } from "@/store";
+import { Button } from "antd";
+import React, { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import styles from "./index.module.scss";
 function UpAsyncLoding() {
+  const dispatch = useDispatch();
+
+  // 从仓库中获取取消上传的函数
+  const closeUpFile = useSelector(
+    (state: RootState) => state.loginStore.closeUpFile
+  );
+
+  const btnClose = useCallback(() => {
+    closeUpFile.fu();
+
+    setTimeout(() => {
+      dispatch({
+        type: "login/closeUpFile",
+        payload: { fu: () => {}, state: false },
+      });
+    }, 200);
+  }, [closeUpFile, dispatch]);
+
   return (
     <div id="UpAsyncLoding" className={styles.UpAsyncLoding}>
       <div className="progressBox">
         <div id="progress"></div>
       </div>
+      {/* 手动取消上传按钮 */}
+      <div className="closeUpBtn">
+        <Button onClick={btnClose}>取消上传</Button>
+      </div>
     </div>
   );
 }

houtai/src/pages/B2Goods/GoodsAdd/index.tsx

@@ -149,6 +149,8 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
           setCover(res.data.filePath);
         }
         UpAsyncLodingDom.style.opacity = 0;
+        UpAsyncLodingDom.style.pointerEvents = "none";
+
         progressDom.style.width = "0%";
       }
     },
@@ -281,6 +283,7 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
           else setFileList({ ...fileList, [fileOneType]: res.data });
         }
         UpAsyncLodingDom.style.opacity = 0;
+        UpAsyncLodingDom.style.pointerEvents = "none";
         progressDom.style.width = "0%";
       }
     },

houtai/src/pages/B3Wall/WallAdd/index.tsx

@@ -15,7 +15,7 @@ import {
 } from "@/store/action/B3Wall";
 type Props = {
   id: number;
-  closeMoalFu: (txt:string) => void;
+  closeMoalFu: (txt: string) => void;
 };
 
 // 上传附件的进度条
@@ -132,6 +132,7 @@ function WallAdd({ id, closeMoalFu }: Props) {
           imgListRef.current.unshift(res.data);
         }
         UpAsyncLodingDom.style.opacity = 0;
+        UpAsyncLodingDom.style.pointerEvents = "none";
         progressDom.style.width = "0%";
       }
     },
@@ -156,7 +157,7 @@ function WallAdd({ id, closeMoalFu }: Props) {
 
       if (res.code === 0) {
         MessageFu.success(id > 0 ? "编辑成功!" : "新增成功!");
-        closeMoalFu(id>0?'编辑':'新增');
+        closeMoalFu(id > 0 ? "编辑" : "新增");
       }
     },
     [closeMoalFu, id, imgList, imgNum]
@@ -296,7 +297,7 @@ function WallAdd({ id, closeMoalFu }: Props) {
               title="放弃编辑后，信息将不会保存!"
               okText="放弃"
               cancelText="取消"
-              onConfirm={()=>closeMoalFu('取消')}
+              onConfirm={() => closeMoalFu("取消")}
             >
               <Button>取消</Button>
             </Popconfirm>

houtai/src/store/action/B2Goods.ts

@@ -1,6 +1,7 @@
 import { DownImgType, GoodsTableType } from "@/types";
 import http from "@/utils/http";
-import { AppDispatch } from "..";
+import axios from "axios";
+import store, { AppDispatch } from "..";
 /**
  * 获取列表数据
  */
@@ -53,11 +54,13 @@ export const goodsRemoveAPI = (id: number) => {
 const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
 const progressDom: any = document.querySelector("#progress");
 
+const CancelToken = axios.CancelToken;
 /**
  * 上传封面图和附件
  */
 export const goodsUploadAPI = (data: any) => {
   UpAsyncLodingDom.style.opacity = 1;
+  UpAsyncLodingDom.style.pointerEvents = "auto";
 
   return http.post("cms/goods/upload", data, {
     timeout: 50000,
@@ -66,6 +69,13 @@ export const goodsUploadAPI = (data: any) => {
       const complete = (e.loaded / e.total) * 100 || 0;
       progressDom.style.width = complete + "%";
     },
+    // 取消上传
+    cancelToken: new CancelToken(function executor(c) {
+      store.dispatch({
+        type: "login/closeUpFile",
+        payload: { fu: c, state: true },
+      });
+    }),
   });
 };
 
@@ -90,11 +100,9 @@ export const setGoodsImgBoderAPI = (id: number, whether: number) => {
   return http.get(`cms/goods/updateFrame/${id}/${whether}`);
 };
 
-
-
 /**
  * 下载图片--水印和压缩选择
  */
-export const getDownImgAPI = (data:DownImgType) => {
-  return http.post('cms/goods/download',data);
+export const getDownImgAPI = (data: DownImgType) => {
+  return http.post("cms/goods/download", data);
 };

houtai/src/store/action/B3Wall.ts

@@ -1,6 +1,7 @@
 import { WallSaveAPIType } from "@/types";
 import http from "@/utils/http";
-import { AppDispatch } from "..";
+import axios from "axios";
+import store, { AppDispatch } from "..";
 
 /**
  * 获取万物墙自动播放数据
@@ -12,11 +13,10 @@ export const getWallAutoApi = () => {
 /**
  * 修改万物墙自动播放数据
  */
-export const editWallAutoApi = (data: {content:string}) => {
+export const editWallAutoApi = (data: { content: string }) => {
   return http.post("cms/wall/setConfig", data);
 };
 
-
 /**
  * 获取列表数据
  */
@@ -51,21 +51,21 @@ export const wallSortAPI = (id1: number, id2: number) => {
 /**
  * 内容-新增|编辑
  */
-export const setWallSave = (data:WallSaveAPIType) => {
-  return http.post('cms/wall/save',data);
+export const setWallSave = (data: WallSaveAPIType) => {
+  return http.post("cms/wall/save", data);
 };
 
-
 // 上传附件的进度条
 const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
 const progressDom: any = document.querySelector("#progress");
 
-
+const CancelToken = axios.CancelToken;
 /**
  * 上传封面图和附件
  */
 export const goodsUploadAPI = (data: any) => {
   UpAsyncLodingDom.style.opacity = 1;
+  UpAsyncLodingDom.style.pointerEvents = "auto";
 
   return http.post("cms/wall/upload", data, {
     timeout: 50000,
@@ -74,12 +74,19 @@ export const goodsUploadAPI = (data: any) => {
       const complete = (e.loaded / e.total) * 100 || 0;
       progressDom.style.width = complete + "%";
     },
+    // 取消上传
+    cancelToken: new CancelToken(function executor(c) {
+      store.dispatch({
+        type: "login/closeUpFile",
+        payload: { fu: c, state: true },
+      });
+    }),
   });
 };
 
 /**
  * 内容-新增|编辑
  */
-export const getWallDetailAPI = (id:number) => {
+export const getWallDetailAPI = (id: number) => {
   return http.get(`cms/wall/detail/${id}`);
 };

houtai/src/store/reducer/login.ts

@@ -27,6 +27,11 @@ const initState = {
     type: "info",
     duration: 3,
   } as MessageType,
+  // 上传文件点击取消
+  closeUpFile: {
+    fu: () => {},
+    state: false,
+  },
 };
 
 // 定义 action 类型
@@ -36,7 +41,14 @@ type LoginActionType =
   | { type: "login/lookVideo"; payload: string }
   | { type: "login/getDictList"; payload: DictListTypeObj }
   | { type: "login/setAuthPageArr"; payload: PermissionsAPIType[] }
-  | { type: "login/message"; payload: MessageType };
+  | { type: "login/message"; payload: MessageType }
+  | {
+      type: "login/closeUpFile";
+      payload: {
+        fu: () => void;
+        state: boolean;
+      };
+    };
 
 // 频道 reducer
 export default function loginReducer(
@@ -62,6 +74,9 @@ export default function loginReducer(
     // 有关权限的信息
     case "login/setAuthPageArr":
       return { ...state, authPageArr: action.payload };
+    // 上传文件点击取消
+    case "login/closeUpFile":
+      return { ...state, closeUpFile: action.payload };
     default:
       return state;
   }

houtai/src/utils/http.ts

@@ -85,13 +85,16 @@ http.interceptors.response.use(
 
     // 如果因为网络原因，response没有，给提示消息
     if (!err.response) {
-      MessageFu.warning("网络繁忙，请稍后重试!");
+      if (store.getState().loginStore.closeUpFile.state)
+        MessageFu.success("取消上传!");
+      else MessageFu.warning("网络繁忙，请稍后重试!");
     } else {
       MessageFu.warning("错误!");
     }
 
     // 响应错误也要取消 上传文件的进度条
     UpAsyncLodingDom.style.opacity = 0;
+    UpAsyncLodingDom.style.pointerEvents = "none";
     progressDom.style.width = "0%";
 
     return Promise.reject(err);