feat: 新增选择文件上传功能，优化部分代码实现

src/hooks/miaoTools.ts

@@ -0,0 +1,47 @@
+export const filePicker = (() => {
+	let _resolve: ((files: File[]) => void) | undefined;
+	return (option?: { accept?: "string"; multiple: boolean }) => {
+		if (_resolve) {
+			_resolve([]);
+			_resolve = undefined;
+		}
+		return new Promise<File[]>(resolve => {
+			const inpEle = document.createElement("input");
+			inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`;
+			inpEle.type = "file";
+			inpEle.style.display = "none";
+			_resolve = resolve;
+			// 文件类型限制
+			// inpEle.accept="image/*"
+			option?.accept && (inpEle.accept = option?.accept);
+			// 多选限制
+			option?.multiple && (inpEle.multiple = option?.multiple);
+			// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
+			inpEle.addEventListener(
+				"change",
+				() => {
+					if (!inpEle.files) {
+						return;
+					}
+					const files: File[] = [];
+					let i = 0;
+					while (i < inpEle.files?.length) {
+						const _file = inpEle?.files?.item(i);
+						if (_file !== null) {
+							files.push(_file);
+						}
+						i += 1;
+					}
+					resolve(files);
+                    _resolve = undefined
+				},
+				{ once: true }
+			);
+			inpEle.click();
+		});
+	};
+})();
+
+export default {
+	filePicker
+};

src/hooks/useMiaoFetchApi.ts

@@ -1,5 +1,5 @@
 import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
-import { getOption, getResponse, miaoFetchConfig, deleteOption, uploadOption, queryOption } from "@/types/fetch";
+import { getOption, getResponse, miaoFetchConfig, deleteOption, uploadOption, queryOption, renameOption, cutOption } from "@/types/fetch";
 import Config from "@/config";
 import axios, { AxiosRequestConfig } from "axios";
 
@@ -71,15 +71,15 @@ const miaoFetchApi = {
 		const formData = new FormData();
 
 		formData.append("file", data);
-        // 必须这样传，不然中文乱码
-		formData.append("fileName", data.name)
+		// 必须这样传，不然中文乱码
+		formData.append("fileName", data.name);
 		formData.append("oprateType", opType);
 
 		return {
 			abort: () => abortMiaoFetch(),
 			response: new Promise<{
-				message: 'success' | 'failed'
-				error?: string
+				message: "success" | "failed";
+				error?: string;
 			}>(async resolve => {
 				const response = await miaoFetch({
 					url,
@@ -107,7 +107,7 @@ const miaoFetchApi = {
 
 		return {
 			response: new Promise<{
-				eventId: number
+				eventId: number;
 			}>(async resolve => {
 				const response = await miaoFetch({
 					url,
@@ -117,6 +117,54 @@ const miaoFetchApi = {
 			})
 		};
 	},
+	/**
+	 * 重命名对应的文件或文件夹
+	 */
+	rename(target: VirtualFile | VirtualDirectory, newName: string, option?: renameOption) {
+		const { baseUrl, api } = Config;
+		const url = `${baseUrl}${api.rename}${target.path}`;
+		const retry = option?.retry ?? 0;
+		const { miaoFetch } = useMiaoFetch({
+			retry
+		});
+
+		return {
+			response: new Promise<{
+				eventId: number;
+			}>(async resolve => {
+				const response = await miaoFetch({
+					url,
+					method: "post",
+					data: { newName }
+				});
+				resolve(response.data);
+			})
+		};
+	},
+	/**
+	 * 剪切文件或文件夹
+	 */
+	cut(target: VirtualFile | VirtualDirectory, to: VirtualDirectory, option?: cutOption) {
+		const newPath = to.path
+		const { baseUrl, api } = Config;
+		const url = `${baseUrl}${api.cut}${target.path}`;
+		const retry = option?.retry ?? 0;
+		const { miaoFetch } = useMiaoFetch({
+			retry
+		});
+		return {
+			response: new Promise<{
+				eventId: number;
+			}>(async resolve => {
+				const response = await miaoFetch({
+					url,
+					method: "post",
+					data: { newPath }
+				});
+				resolve(response.data);
+			})
+		};
+	},
 
 	/**
 	 * 查询服务端操作事件的进展
@@ -130,15 +178,15 @@ const miaoFetchApi = {
 		});
 		return {
 			response: new Promise<{
-				status: 'process' | 'success' | 'failed',
-				error?: unknown
+				status: "process" | "success" | "failed";
+				error?: unknown;
 			}>(async resolve => {
 				const response = await miaoFetch({
 					url,
 					method: "get",
 					params: {
-                        id: eventId
-                    }
+						id: eventId
+					}
 				});
 				resolve(response.data);
 			})