@skyfox2000/webui 1.0.13 → 1.2.0

package/src/utils/file-upload.ts

@@ -0,0 +1,304 @@
+import { hostUrl, IUrlInfo } from '@skyfox2000/fapi';
+
+import { getToken } from '@/utils/main-openapis';
+import { UploadFile, UploadStatus } from '@/typings/upload.d';
+import dayjs from 'dayjs';
+
+export class path {
+   /**
+    * 连接路径参数，已判断 undefined 或 null 值
+    * @param args 路径参数数组
+    * @returns 连接后的路径字符串
+    */
+   public static join(...args: (string | undefined | null)[]): string {
+      // 忽略 undefined 或 null
+      const validArgs = args.filter((arg) => arg !== undefined && arg !== null);
+      // 连接路径
+      const result = validArgs.join('/');
+      // 确保不会重复斜杠
+      return result.replace(/[\/]+/, '/');
+   }
+}
+
+/**
+ * 异步文件上传类
+ */
+export class AsyncUploader {
+   /**
+    * 设置 API 端点和最大并发数，所有上传文件通过该类控制
+    */
+   private urlInfo: IUrlInfo;
+
+   /**
+    * 最大并发上传数
+    */
+   private maxConcurrent: number;
+
+   /**
+    * 控制上传任务的中断信号
+    */
+   private abortController?: AbortController;
+
+   /**
+    * AsyncUploader 构造函数
+    * @param urlInfo 文件上传的 API 配置（IUrlInfo 对象）
+    * @param maxConcurrent 最大允许并发上传的文件数量
+    */
+   constructor(urlInfo: IUrlInfo, maxConcurrent: number) {
+      this.urlInfo = urlInfo;
+      this.maxConcurrent = maxConcurrent;
+   }
+
+   /**
+    * 上传多个文件，控制并发数量
+    * @param files 文件列表（File[] 或 FileList）
+    * @param onProgress 上传进度回调
+    * @param onComplete 上传完成回调
+    */
+   public async uploadFiles(
+      fileList: UploadFile[],
+      onProgress?: (file: UploadFile) => void,
+      onComplete?: (files: UploadFile[]) => void,
+   ): Promise<void> {
+      if (!fileList.length) return;
+
+      const maxConcurrent = Math.min(this.maxConcurrent, fileList.length);
+      const pendingFiles: UploadFile[] = [];
+      for (const file of fileList) {
+         switch (file.status) {
+            case UploadStatus.Success:
+            case UploadStatus.Online:
+            case UploadStatus.Offline:
+               // 已在服务器上，不处理
+               break;
+            default:
+               file.status = UploadStatus.Pending;
+               pendingFiles.push(file);
+               break;
+         }
+      }
+      const activeUploads: Promise<void>[] = [];
+
+      // 创建新的中止控制器
+      this.abortController = new AbortController();
+
+      try {
+         // 启动并发上传任务
+         while (activeUploads.length < maxConcurrent && pendingFiles.length > 0) {
+            const file = pendingFiles.shift();
+            if (!file) break;
+
+            activeUploads.push(this.handleFileStatus(file, activeUploads, pendingFiles, onProgress));
+         }
+
+         // 等待所有上传任务完成
+         await Promise.all(activeUploads);
+         onComplete?.(fileList);
+      } catch (error) {
+         console.error('上传失败：', error);
+         fileList.forEach((file) => {
+            file.status = UploadStatus.Error;
+            file.error = error instanceof Error ? error : new Error('上传失败');
+            onProgress?.(file);
+         });
+         onComplete?.(fileList);
+      }
+   }
+
+   /**
+    * 处理单个文件的上传逻辑
+    * @param file 当前上传的文件
+    * @param activeUploads 当前正在上传的文件列表
+    * @param pendingFiles 等待上传的文件列表
+    * @param onProgress 上传进度回调
+    */
+   private async handleFileStatus(
+      file: UploadFile,
+      activeUploads: Promise<void>[],
+      pendingFiles: UploadFile[],
+      onProgress?: (file: UploadFile) => void,
+   ): Promise<void> {
+      try {
+         // 更新文件状态为"正在上传"
+         file.status = UploadStatus.Uploading;
+
+         await this.uploadFile(file, this.abortController!.signal, (percent) => {
+            file.percent = percent;
+            onProgress?.(file);
+         });
+
+         // 更新文件状态为"上传成功"
+         file.status = UploadStatus.Success;
+      } catch (error) {
+         // 更新文件状态为"上传失败"
+         file.status = UploadStatus.Error;
+         file.error = error instanceof Error ? error : new Error('上传失败');
+         console.error(file.error);
+      } finally {
+         // 启动下一个上传任务
+         if (pendingFiles.length > 0) {
+            const nextFile = pendingFiles.shift();
+            if (nextFile) {
+               activeUploads.push(this.handleFileStatus(nextFile, activeUploads, pendingFiles, onProgress));
+            }
+         }
+      }
+   }
+
+   /**
+    * 使用 XMLHttpRequest 上传文件
+    * @param file 文件对象
+    * @param signal 中断信号
+    * @param onProgress 上传进度回调
+    */
+   public async uploadFile(
+      file: UploadFile,
+      signal: AbortSignal,
+      onProgress: (percent: number) => void,
+   ): Promise<UploadFile> {
+      // 以 Promise 化的方式处理上传请求
+      return new Promise((resolve, reject) => {
+         // 创建表单数据
+         const formData = new FormData();
+         formData.append('file', file.originFileObj as File);
+
+         // 添加 params 参数
+         if (file.params) {
+            for (const key in file.params) {
+               formData.append(key, file.params[key]);
+            }
+         }
+
+         // 创建 XMLHttpRequest 对象
+         const xhr = new XMLHttpRequest();
+         const url = hostUrl(this.urlInfo);
+         if (url === false) return Promise.resolve(null);
+         xhr.open('POST', url, true);
+
+         // 设置请求头
+         if (this.urlInfo.header) {
+            if (typeof this.urlInfo.header === 'object') {
+               Object.entries(this.urlInfo.header).forEach(([key, value]) => {
+                  xhr.setRequestHeader(key, value);
+               });
+            }
+         }
+
+         // 添加授权 Token（如果需要）
+         if (this.urlInfo.authorize) {
+            const token = getToken(); // 假设 getToken 是获取 Token 的方法
+            if (!token) {
+               reject(new Error('未授权或授权过期'));
+               return;
+            }
+            xhr.setRequestHeader('Authorization', 'Bearer ' + token);
+         }
+
+         // 监听上传进度事件
+         xhr.upload.addEventListener('progress', (event) => {
+            if (event.lengthComputable && event.total > 0) {
+               const percent = Math.round((event.loaded / event.total) * 100); // 计算进度百分比
+               onProgress(percent);
+            }
+         });
+
+         // 监听加载完成事件
+         xhr.addEventListener('load', () => {
+            if (xhr.status >= 200 && xhr.status < 300) {
+               // 检查返回的内容类型是否是 JSON
+               const contentType = xhr.getResponseHeader('Content-Type');
+               if (!contentType || !contentType.includes('application/json')) {
+                  reject(new Error('返回的结果不是 JSON 格式'));
+                  return;
+               }
+
+               try {
+                  // 解析 JSON 数据
+                  const res = JSON.parse(xhr.response);
+                  // 判断上传是否成功
+                  if (res.status === 'success') {
+                     // 上传成功
+                     if (res.data)
+                        file.minioFile = {
+                           ETag: res.data.ETag,
+                           Bucket: res.data.Bucket,
+                           Key: res.data.Key,
+                           Size: res.data.Size,
+                           UpdateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+                           Status: UploadStatus.Online,
+                        };
+                     resolve(file); // 上传成功，返回解析后的 JSON 数据
+                  } else {
+                     // 如果 status 不是 success，则视为失败，提取 msg 作为错误信息
+                     const error = res.msg;
+                     reject(new Error(error));
+                  }
+               } catch (error) {
+                  // 如果 JSON 格式无效，抛出错误
+                  reject(new Error('无法解析返回的 JSON 数据: ' + error));
+               }
+            } else {
+               // 根据 HTTP 状态码判断上传失败的原因
+               reject(new Error(`上传失败，状态码：${xhr.status}`));
+            }
+         });
+
+         // 监听网络错误事件
+         xhr.addEventListener('error', () => {
+            reject(new Error('上传失败，网络异常'));
+         });
+
+         // 发送请求
+         xhr.send(formData);
+
+         // 绑定中断信号
+         signal.addEventListener('abort', () => {
+            xhr.abort(); // 中断上传
+            reject(new Error('上传已取消'));
+         });
+      });
+   }
+
+   /**
+    * 取消当前所有的上传任务
+    */
+   public cancelUpload(): void {
+      if (this.abortController) {
+         this.abortController.abort(); // 触发中断信号
+      }
+   }
+}
+
+// // 使用示例
+// (async () => {
+//    // 创建上传器实例，指定 API 配置和最大并发数
+//    const urlInfo: IUrlInfo = {
+//       url: 'https://your-api-endpoint.com/upload',
+//       header: {
+//          'Content-Type': 'multipart/form-data',
+//       },
+//       authorize: true, // 需要授权
+//    };
+
+//    const uploader = new AsyncUploader(urlInfo, 3);
+
+//    // 模拟文件列表
+//    const fileList: File[] = [
+//       /* 添加你的文件 */
+//    ];
+
+//    try {
+//       // 开始上传文件
+//       await uploader.upload(
+//          fileList,
+//          (file) => {
+//             console.log(`${file.name} 上传进度：${file.percent}% (${file.status})`);
+//          },
+//          (files) => {
+//             console.log('所有文件上传完成：', files);
+//          },
+//       );
+//    } catch (error) {
+//       console.error('上传错误：', error);
+//    }
+// })();