优化和修复 blob查看和下载文件的逻辑

src/components/Z3upFiles/index.tsx

@@ -14,8 +14,8 @@ import {
 } from "@ant-design/icons";
 import classNames from "classnames";
 import { baseURL } from "@/utils/http";
-import filesLookFu from "@/utils/filesLook";
 import { A1_APIremoveSure } from "@/store/action/A1Project";
+import { authFilesLookFu } from "@/utils/authFilesLook";
 
 type Props = {
   max: number; //最多传多少个文件
@@ -138,7 +138,7 @@ function Z3upFiles(
           >
             上传
           </Button>
-        ) : null}
+        ) : null} 
 
         <div className="Z3files">
           {fileList.map((v) => (
@@ -147,12 +147,14 @@ function Z3upFiles(
                 {v.fileName}
               </div>
               <div className="Z3files2">
-                {filesLookFu(v.fileName) ? (
+                {authFilesLookFu(v.fileName, "") ? (
                   <>
                     <EyeOutlined
                       rev={undefined}
                       title="查看"
-                      onClick={() => filesLookFu(v.fileName, v.filePath)}
+                      onClick={() =>
+                        authFilesLookFu(v.fileName, v.filePath, true)
+                      }
                     />
                     &emsp;
                   </>

src/pages/A1Project/A1Add/index.tsx

@@ -148,10 +148,6 @@ function A1Add({ pageType, closeFu, addFu, editFu }: Props) {
   // 创建人 的 值
   const [creatorIdValue, setCreatorIdValue] = useState(userInfo.id);
 
-  useEffect(() => {
-    console.log("---------", creatorIdValue);
-  }, [creatorIdValue]);
-
   return (
     <div className={styles.A1Add}>
       <div
@@ -362,7 +358,7 @@ function A1Add({ pageType, closeFu, addFu, editFu }: Props) {
                   okButtonProps={{ loading: false }}
                 >
                   <Button>取消</Button>
-                </Popconfirm>{" "}
+                </Popconfirm>
                 <br />
                 <br />
                 <Button type="primary" htmlType="submit">

src/pages/A1Project/A1Inner/A1IupFile/index.tsx

@@ -350,7 +350,7 @@ function A1IupFile({
             <div className="myIncoRow" key={v.uid}>
               {v.percent === 100 && v.response && v.response.data ? (
                 <>
-                  {authFilesLookFu(v.response.data.fileName) ? (
+                  {authFilesLookFu(v.response.data.fileName,'') ? (
                     <>
                       {/* // 1.预览（fileName里面有常用的，浏览器能识别的 图片 音频 视频 模型） */}
                       <div title="预览文件">

src/pages/A1Project/A1Inner/index.tsx

@@ -233,7 +233,7 @@ function A1Inner({ projectId, myTitle, projectName }: Props) {
             "-"
           ) : (
             <>
-              {authFilesLookFu(item.fileName) ? (
+              {authFilesLookFu(item.fileName,'') ? (
                 <Button
                   size="small"
                   type="text"

src/pages/A1Project/A1Outer/A1OupFile/index.tsx

@@ -224,7 +224,7 @@ function A1OupFile({ myUrl, fromData, nowLoc, closeFu, upFileFu }: props) {
             <div className="myIncoRow" key={v.uid}>
               {v.percent === 100 && v.response && v.response.data ? (
                 <>
-                  {authFilesLookFu(v.response.data.name) ? (
+                  {authFilesLookFu(v.response.data.name,'') ? (
                     <>
                       {/* // 1.预览（name里面有常用的，浏览器能识别的 图片 音频 视频 模型） */}
                       <div title="预览文件">

src/pages/A1Project/A1Outer/index.tsx

@@ -189,7 +189,7 @@ function A1Outer({ projectId, projectName }: Props) {
         title: "操作",
         render: (item: A1OFileType) => (
           <>
-            {authFilesLookFu(item.name) ? (
+            {authFilesLookFu(item.name,'') ? (
               <Button
                 size="small"
                 type="text"

src/pages/A1Project/A1Result/index.tsx

@@ -255,7 +255,7 @@ export const A1Result: FC<A1ResultProps> = ({ pageType, closeFu, addFu, editFu }
                           linkChangeFu(v.id, e.target.value, "link")
                         }
                         style={{ width: 800 }}
-                        maxLength={100}
+                        maxLength={200}
                         showCount
                         placeholder="请输入链接"
                       />

src/store/action/layout.ts

@@ -40,3 +40,10 @@ export const API_upFile = (data: any, url: string) => {
     }),
   });
 };
+
+/**
+ * 查看文件和下载文件
+ */
+export const API_lookFileOrDownFlie = (url: string) => {
+  return http.get(url, { responseType: "blob" });
+};

src/utils/authFilesLook.ts

@@ -1,90 +1,87 @@
 import store from "@/store";
-import { baseUpUrl } from "./http";
-import { getTokenFu } from "./storage";
-import { domShowFu } from "./domShow";
+import { API_lookFileOrDownFlie } from "@/store/action/layout";
+import { baseURL } from "./http";
 
 // 携带token，转换成文件流
-export const urlChangeFu = (
+export const urlChangeFu = async (
   url: string,
   flag: boolean,
   type?: "img" | "video" | "audio" | "pdf",
   name?: string
 ) => {
-  // 打开加载中
-  domShowFu("#AsyncSpinLoding", true);
-
   // flag true 为 生成 a标签 下载
 
-  let xhr = new XMLHttpRequest();
-
-  xhr.open("get", baseUpUrl.replace("api/", "api") + url, true);
-
-  xhr.responseType = "blob";
-  xhr.onload = function (res) {
-    // 取消加载中状态
-    domShowFu("#AsyncSpinLoding", false);
-
-    if (this.status === 200) {
-      let blob = this.response;
-
-      // 转为为Blob格式的
-      const srcRes = window.URL.createObjectURL(blob);
-
-      if (flag) {
-        // 创建a标签下载
-        let link = document.createElement("a"); //创建a标签
-        link.style.display = "none"; //使其隐藏
-        link.href = srcRes; //赋予文件下载地址
-        link.setAttribute("download", name!); //设置下载属性 以及文件名
-        document.body.appendChild(link); //a标签插至页面中
-        link.click(); //强制触发a标签事件
-        document.body.removeChild(link);
-      } else {
-        if (type === "img") {
-          store.dispatch({
-            type: "layout/lookBigImg",
-            payload: {
-              url: srcRes,
-              show: true,
-            },
-          });
-        } else if (type === "pdf") {
-          window.open(srcRes);
-        } else if (type === "audio" || type === "video") {
-          store.dispatch({
-            type: "layout/lookDom",
-            payload: {
-              src: srcRes,
-              type,
-              flag: true,
-            },
-          });
-        }
+  const res: any = await API_lookFileOrDownFlie(url);
+
+  if (res) {
+    const srcRes = window.URL.createObjectURL(res);
+
+    if (flag) {
+      // 创建a标签下载
+      let link = document.createElement("a"); //创建a标签
+      link.style.display = "none"; //使其隐藏
+      link.href = srcRes; //赋予文件下载地址
+      link.setAttribute("download", name!); //设置下载属性 以及文件名
+      document.body.appendChild(link); //a标签插至页面中
+      link.click(); //强制触发a标签事件
+      document.body.removeChild(link);
+    } else {
+      if (type === "img") {
+        store.dispatch({
+          type: "layout/lookBigImg",
+          payload: {
+            url: srcRes,
+            show: true,
+          },
+        });
+      } else if (type === "pdf") {
+        window.open(srcRes);
+      } else if (type === "audio" || type === "video") {
+        store.dispatch({
+          type: "layout/lookDom",
+          payload: {
+            src: srcRes,
+            type,
+            flag: true,
+          },
+        });
       }
     }
-  };
-
-  // 携带token
-  xhr.setRequestHeader("token", getTokenFu());
-
-  xhr.send();
+  }
 };
 
 // 查看 权限 图片 /视频 、音频
-export const authFilesLookFu = (name: string, url?: string) => {
+export const authFilesLookFu = (
+  name: string,
+  url: string,
+  // 不需要权限
+  noAuth?: boolean
+) => {
   let flag = false;
 
   const nameRes = name ? name : "";
 
   if (nameRes.toLowerCase().endsWith(".pdf")) {
-    if (url) urlChangeFu(url, false, "pdf");
+    if (url) {
+      noAuth ? window.open(baseURL + url) : urlChangeFu(url, false, "pdf");
+    }
     flag = true;
   }
 
   const arr1 = [".png", ".jpg", ".jpeg", ".gif"];
   arr1.forEach((v) => {
     if (nameRes.toLowerCase().endsWith(v)) {
-      if (url) urlChangeFu(url, false, "img");
+      if (url) {
+        noAuth
+          ? store.dispatch({
+              type: "layout/lookBigImg",
+              payload: {
+                url: baseURL + url,
+                show: true,
+              },
+            })
+          : urlChangeFu(url, false, "img");
+      }
 
       flag = true;
     }
@@ -106,7 +103,17 @@ export const authFilesLookFu = (name: string, url?: string) => {
     flag = true;
   }
 
-  if (type && url) urlChangeFu(url, false, type);
+  if (type && url) {
+    noAuth
+      ? store.dispatch({
+          type: "layout/lookDom",
+          payload: {
+            src: url,
+            type,
+          },
+        })
+      : urlChangeFu(url, false, type);
+  }
 
   return flag;
 };

src/utils/filesLook.ts

@@ -1,60 +0,0 @@
-import store from "@/store";
-import { baseURL } from "./http";
-
-const filesLookFu = (name: string, url?: string) => {
-  let flag = false;
-
-  const nameRes = name ? name : "";
-
-  if (nameRes.toLowerCase().endsWith(".pdf")) {
-    if (url) window.open(baseURL + url);
-    flag = true;
-  }
-
-  const arr1 = [".png", ".jpg", ".jpeg", ".gif"];
-  arr1.forEach((v) => {
-    if (nameRes.toLowerCase().endsWith(v)) {
-      if (url) {
-        store.dispatch({
-          type: "layout/lookBigImg",
-          payload: {
-            url: baseURL + url,
-            show: true,
-          },
-        });
-      }
-
-      flag = true;
-    }
-  });
-
-  let type: "" | "video" | "audio" = "";
-
-  const arr2 = [".mp3", ".wav"];
-
-  arr2.forEach((v) => {
-    if (nameRes.toLowerCase().endsWith(v)) {
-      type = "audio";
-      flag = true;
-    }
-  });
-
-  if (nameRes.toLowerCase().endsWith(".mp4")) {
-    type = "video";
-    flag = true;
-  }
-
-  if (type && url) {
-    store.dispatch({
-      type: "layout/lookDom",
-      payload: {
-        src: url,
-        type,
-      },
-    });
-  }
-
-  return flag;
-};
-
-export default filesLookFu;

src/utils/http.ts

@@ -30,7 +30,7 @@ const http = axios.create({
   // baseURL: baseURL,
 
   // --------打包或线上环境接口需要加上api/
-  baseURL: baseURL + "/api/",
+  baseURL: baseUpUrl,
   timeout: 5000,
 });