feat: 文件传输开发

package-lock.json

@@ -4204,6 +4204,15 @@
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
       "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g=="
     },
+    "combine-errors": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/combine-errors/-/combine-errors-3.0.3.tgz",
+      "integrity": "sha512-C8ikRNRMygCwaTx+Ek3Yr+OuZzgZjduCOfSQBjbM8V3MfgcjSTeto/GXP6PAwKvJz/v15b7GHZvx5rOlczFw/Q==",
+      "requires": {
+        "custom-error-instance": "2.1.1",
+        "lodash.uniqby": "4.5.0"
+      }
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -4665,6 +4674,11 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.0.tgz",
       "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
+    "custom-error-instance": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/custom-error-instance/-/custom-error-instance-2.1.1.tgz",
+      "integrity": "sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg=="
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -8250,6 +8264,11 @@
         }
       }
     },
+    "js-base64": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-2.6.4.tgz",
+      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
+    },
     "js-cookie": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
@@ -8519,6 +8538,46 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash._baseiteratee": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmmirror.com/lodash._baseiteratee/-/lodash._baseiteratee-4.7.0.tgz",
+      "integrity": "sha512-nqB9M+wITz0BX/Q2xg6fQ8mLkyfF7MU7eE+MNBNjTHFKeKaZAPEzEg+E8LWxKWf1DQVflNEn9N49yAuqKh2mWQ==",
+      "requires": {
+        "lodash._stringtopath": "~4.8.0"
+      }
+    },
+    "lodash._basetostring": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmmirror.com/lodash._basetostring/-/lodash._basetostring-4.12.0.tgz",
+      "integrity": "sha512-SwcRIbyxnN6CFEEK4K1y+zuApvWdpQdBHM/swxP962s8HIxPO3alBH5t3m/dl+f4CMUug6sJb7Pww8d13/9WSw=="
+    },
+    "lodash._baseuniq": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmmirror.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz",
+      "integrity": "sha512-Ja1YevpHZctlI5beLA7oc5KNDhGcPixFhcqSiORHNsp/1QTv7amAXzw+gu4YOvErqVlMVyIJGgtzeepCnnur0A==",
+      "requires": {
+        "lodash._createset": "~4.0.0",
+        "lodash._root": "~3.0.0"
+      }
+    },
+    "lodash._createset": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/lodash._createset/-/lodash._createset-4.0.3.tgz",
+      "integrity": "sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA=="
+    },
+    "lodash._root": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/lodash._root/-/lodash._root-3.0.1.tgz",
+      "integrity": "sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ=="
+    },
+    "lodash._stringtopath": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmmirror.com/lodash._stringtopath/-/lodash._stringtopath-4.8.0.tgz",
+      "integrity": "sha512-SXL66C731p0xPDC5LZg4wI5H+dJo/EO4KTqOMwLYCH3+FmmfAKJEZCm6ohGpI+T1xwsDsJCfL4OnhorllvlTPQ==",
+      "requires": {
+        "lodash._basetostring": "~4.12.0"
+      }
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -8539,11 +8598,25 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
     },
+    "lodash.uniqby": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/lodash.uniqby/-/lodash.uniqby-4.5.0.tgz",
+      "integrity": "sha512-IRt7cfTtHy6f1aRVA5n7kT8rgN3N1nH6MOWLcHfpWG2SH19E3JksLK38MktLxZDhlAjCP9jpIXkOnRXlu6oByQ==",
+      "requires": {
+        "lodash._baseiteratee": "~4.7.0",
+        "lodash._baseuniq": "~4.6.0"
+      }
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -9921,6 +9994,22 @@
         }
       }
     },
+    "proper-lockfile": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/proper-lockfile/-/proper-lockfile-2.0.1.tgz",
+      "integrity": "sha512-rjaeGbsmhNDcDInmwi4MuI6mRwJu6zq8GjYCLuSuE7GF+4UjgzkL69sVKKJ2T2xH61kK7rXvGYpvaTu909oXaQ==",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "retry": "^0.10.0"
+      },
+      "dependencies": {
+        "retry": {
+          "version": "0.10.1",
+          "resolved": "https://registry.npmmirror.com/retry/-/retry-0.10.1.tgz",
+          "integrity": "sha512-ZXUSQYTHdl3uS7IuCehYfMzKyIDBNoAuUblvy5oGO5UJSUTmStUUVPXbA9Qxd173Bgre53yCQczQuHgRWAdvJQ=="
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -9960,6 +10049,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -11399,6 +11493,26 @@
         }
       }
     },
+    "tus-js-client": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/tus-js-client/-/tus-js-client-2.1.1.tgz",
+      "integrity": "sha512-ILpgHlR0nfKxmlkXfrZ2z61upkHEXhADOGbGyvXSPjp7bn1NhU50p/Mu59q577Xirayr9vlW4tmoFqUrHKcWeQ==",
+      "requires": {
+        "buffer-from": "^0.1.1",
+        "combine-errors": "^3.0.3",
+        "js-base64": "^2.4.9",
+        "lodash.throttle": "^4.1.1",
+        "proper-lockfile": "^2.0.1",
+        "url-parse": "^1.4.3"
+      },
+      "dependencies": {
+        "buffer-from": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-0.1.2.tgz",
+          "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg=="
+        }
+      }
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -11510,6 +11624,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmmirror.com/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "requires": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "use-immer": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/use-immer/-/use-immer-0.7.0.tgz",
@@ -11715,7 +11838,7 @@
     },
     "webpack-dev-server": {
       "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
+      "resolved": "https://registry.npmmirror.com/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
       "integrity": "sha512-+Nlb39iQSOSsFv0lWUuUTim3jDQO8nhK3E68f//J2r5rIcp4lULHXz2oZ0UVdEeWXEh5lSzYUlzarZhDAeAVQw==",
       "requires": {
         "@types/bonjour": "^3.5.9",

package.json

@@ -83,7 +83,8 @@
     "webpack": "^5.64.4",
     "webpack-dev-server": "^4.6.0",
     "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.4.1"
+    "workbox-webpack-plugin": "^6.4.1",
+    "tus-js-client": "2.1.1"
   },
   "scripts": {
     "start:master": "set \"REACT_APP_ENV=master\" && npm start",

src/react-app-env.d.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:17:23
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-02 17:15:35
+ * @LastEditTime: 2022-06-14 10:28:43
  * @FilePath: /bkunyun/src/react-app-env.d.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -81,3 +81,6 @@ declare module "*.module.sass" {
 declare module "@mui/lab";
 declare module "lodash";
 declare module "@mui/material/Tab";
+declare module "tus-js-client";
+declare module "uuid";
+

src/store/index.ts

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-09 20:41:05
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-14 10:16:23
+ * @FilePath: /bkunyun/src/store/index.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import * as React from "react";
 import { configure } from "mobx";
 import permissionStore from "./modules/permission";
 import menuStore from "./modules/menu";
 import currentProjectStore from "./modules/currentProject";
+import fileList from "./modules/fileList";
 
 configure({ enforceActions: "always" });
 
-export const stores = { permissionStore, menuStore, currentProjectStore };
+export const stores = { permissionStore, menuStore, currentProjectStore, fileList };
+
+/** Store类型 */
+export type Stores = typeof stores;
+
 export const CounterContext = React.createContext(stores);
 
 export const useStores = () => React.useContext(CounterContext);

src/utils/util.ts

@@ -2,10 +2,13 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-07 18:37:53
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-07 19:59:25
+ * @LastEditTime: 2022-06-14 10:32:54
  * @FilePath: /bkunyun/src/utils/util.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
+
+import { v4 as uuidv4 } from 'uuid';
+
 export const isProjectOwner = (name: string) => {
   let localName = "";
   try {
@@ -16,6 +19,31 @@ export const isProjectOwner = (name: string) => {
   return localName === name;
 };
 
+/**
+ * 生成32位的随机id
+ * @returns 返回32位的uuid
+ */
+ export const uuid = () => {
+  const reg = /-/g;
+  const pwd = uuidv4().replace(reg, '');
+  return pwd;
+};
+
+// 获取用户token 信息
+export const getUserInfo = () => {
+  let val: any;
+  try {
+    val = JSON.parse(localStorage.getItem("userInfo") || "{}")
+  }
+  catch {
+    console.error("获取用户信息token 出错");
+  }
+  return val
+}
+
+  
+
+
 const IsNumberLetterChineseReg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
 
 export const checkIsNumberLetterChinese = (string: string) => {

src/views/ConsoleLayout/components/FileItem/index.tsx

+import { useEffect } from "react";
+
+import useGlobalStore from "@/hooks/useGlobalStore";
+import { observer } from "mobx-react-lite";
+import { toJS } from "mobx";
+import UseTusUpload from "@/utils/Upload/tusUpload";
+// toJS(currentProjectStore.currentProjectInfo.id);
+
 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-11 15:46:42
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-11 15:49:11
+ * @LastEditTime: 2022-06-14 11:07:55
  * @FilePath: /bkunyun/src/views/ConsoleLayout/components/FileItem/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-const FileItem = () => {
+const FileItem = observer(() => {
+  const fileList = toJS(useGlobalStore("fileList"));
+
+  const { uploadFile } = UseTusUpload(fileList?.fileList);
+  useEffect(() => {
+    fileList?.fileList?.forEach((item) => {
+      uploadFile(
+        item.id,
+        item.list,
+        "/",
+        "/",
+        (upload: any, filepath: string) => console.log(upload, filepath, 1111)
+      );
+    });
+    console.log(fileList?.fileList, 1111);
+  }, [fileList.fileList, uploadFile]);
   return <div>dd</div>;
-};
+});
 
 export default FileItem;

src/views/Project/ProjectData/UpLoaderFile/index.tsx

@@ -4,7 +4,7 @@ import style from "./index.module.css";
 import { TextField } from "@mui/material";
 import MyDialog from "@/components/mui/MyDialog";
 import { Button } from "@mui/material";
-import { checkIsNumberLetterChinese } from "@/utils/util";
+import { checkIsNumberLetterChinese, uuid } from "@/utils/util";
 import { useMessage } from "@/components/MySnackbar";
 import { useDropzone } from "react-dropzone";
 import Table from "@/components/Material.Ui/Table";
@@ -13,8 +13,11 @@ import noFile from "@/assets/project/noFile.svg";
 import uploaderIcon from "@/assets/project/uploaderIcon.svg";
 import classnames from "classnames";
 import { getMbfromB } from "@/utils/util";
+import { observer } from "mobx-react-lite";
+import useGlobalStore from "@/hooks/useGlobalStore";
 
-const UpLoaderFile = (props: any) => {
+const UpLoaderFile = observer((props: any) => {
+  const uploadInfoStore = useGlobalStore("fileList");
   const message = useMessage();
   const [fileList, setFileList] = useState<any>([]);
   // list 是项目数据table的数据
@@ -56,6 +59,16 @@ const UpLoaderFile = (props: any) => {
   let dialogRef: any = React.createRef();
 
   const handleSubmit = () => {
+    const newFileList = fileList?.map((item: any) => {
+      return {
+        id: uuid(),
+        open: false,
+        list: item,
+        isPermanence: true,
+      };
+    });
+    uploadInfoStore.setFileList(newFileList);
+
     console.log("handleSubmit");
   };
 
@@ -188,6 +201,6 @@ const UpLoaderFile = (props: any) => {
       </div>
     </MyDialog>
   );
-};
+});
 
 export default UpLoaderFile;