feat:腾讯云分片上传

ba4e2f23 · renmanyi · 4324d0e7 · ba4e2f23
Commit ba4e2f23 authored Feb 03, 2026 by renmanyi
Show whitespace changes
Inline Side-by-side

Showing with 123 additions and 27 deletions

src/modules/prepare-lesson/modal/UploadProgressModal.jsx
+123 -27

No files found.
--- a/src/modules/prepare-lesson/modal/UploadProgressModal.jsx
+++ b/src/modules/prepare-lesson/modal/UploadProgressModal.jsx
 import React from 'react';
 import { Modal } from 'antd';
 import OSS from 'ali-oss';
+import COS from 'cos-js-sdk-v5';
 import Service from '@/common/js/service';
-import { getEllipsText } from "@/core/util";
+import { getEllipsText, randomString } from "@/core/util";
 import { DEFAULT_SIZE_UNIT, FileTypeIcon, FileVerifyMap } from "@/common/constants/academic/lessonEnum";
 import { getFileTypeByName } from '../components/FolderManage';
@@ -10,6 +11,7 @@ import User from '@/common/js/user';
 import './UploadProgressModal.less';
 const UPLOAD_REGION = 'oss-cn-hangzhou';
+const TX_UPLOAD_REGION = 'ap-guangzhou';
 const UPLOAD_PART_SIZE = 1024 * 1024; // 每个分片大小(byte)
 const UPLOAD_PARALLEL = 5; // 同时上传的分片数
@@ -72,30 +74,45 @@ class UploadProgressModal extends React.Component {
        const { result = {} } = res;
        const {
          bucket,
-          callBack,
          resourceId,
          accessKeyId,
          securityToken,
          accessKeySecret,
-          callbackBody,
+          ossUri,
-          ossUri
+          vendorType,
+          callbackData,
+          callback
        } = result;
-        const ossClient = new OSS({
+        let ossClient;
+        if (vendorType === 'TENCENT_COS') {
+          // 腾讯云 COS 客户端配置
+          ossClient = new COS({
+            SecretId: accessKeyId,
+            SecretKey: accessKeySecret,
+            SecurityToken: securityToken
+          });
+        } else {
+          // 阿里云 OSS 客户端配置
+          ossClient = new OSS({
            bucket,
            accessKeyId,
            accessKeySecret,
            region: UPLOAD_REGION,
            stsToken: securityToken,
          });
+        }
        this.setState({
          ossClient,
          resourceId,
-          callBack,
+          ossUri,
-          callbackBody,
+          vendorType,
-          ossUri
+          bucket,
+          callback,
+          callbackData,
        });
-        resolve({ ossClient, resourceId, callBack, callbackBody, ossUri });
+        resolve({ ossClient, resourceId, ossUri, vendorType, bucket, callback, callbackData });
      })
    })
  }
@@ -108,17 +125,48 @@ class UploadProgressModal extends React.Component {
    const { id = 0 } = currentFolder;
    const { name, type } = fileContent;
-    const resourceName = window.random_string(16) + name.slice(name.lastIndexOf('.'));
+    const resourceName = randomString(16) + name.slice(name.lastIndexOf('.'));
-    const { instId } = window.currentUserInstInfo;
    // 开始上传之前初始化OssClient
    this.initOssClient(id, resourceName).then((result) => {
-      const { ossClient, resourceId, callBack, callbackBody, ossUri } = result;
+      const { ossClient, resourceId, ossUri, vendorType, bucket, callback, callbackData } = result;
+      if (vendorType === 'TENCENT_COS') {
+        // 腾讯云分片上传
+        ossClient.sliceUploadFile({
+          Bucket: bucket,
+          Region: TX_UPLOAD_REGION,
+          Key: ossUri,
+          Body: fileContent,
+          SliceSize: UPLOAD_PART_SIZE,
+          // 回调配置
+          Callback: callback,
+          onProgress: (progressData) => {
+            const progress = progressData.percent;
+            this.onMultipartUploadProgress(progress, { uploadId: randomString(16), file: fileContent }, file);
+          },
+          onTaskReady: (taskId) => {
+            // 记录任务ID，用于取消上传
+            file.taskId = taskId;
+          },
+        })
+        .then(res => {
+          file.status = 'success';
+          this.setState({ fileList });
+          this.props.onUpload(fileContent, resourceId);
+        })
+        .catch(err => {
+          file.status = 'fail';
+          this.setState({ fileList });
+        });
+      } else {
+        // 阿里云分片上传
        ossClient.multipartUpload(ossUri, fileContent, {
          callback: {
-          url: callBack,
+            url: callbackData.url,
-          body: callbackBody,
+            body: callbackData.body,
-          contentType: 'application/json',
+            callbackSNI: true,
+            contentType: callbackData.contentType
          },
          parallel: UPLOAD_PARALLEL,
          partSize: UPLOAD_PART_SIZE,
@@ -134,6 +182,7 @@ class UploadProgressModal extends React.Component {
          file.status = 'fail';
          this.setState({ fileList });
        });
+      }
    });
  }
@@ -158,17 +207,47 @@ class UploadProgressModal extends React.Component {
  // 断点续传
  handleReUpload = (index) => {
-    const { fileList, ossClient, resourceId, callBack, callbackBody } = this.state;
+    const { fileList, ossClient, resourceId, callbackData, vendorType, bucket, callback, ossUri } = this.state;
    const currentFile = fileList[index];
-    const { checkpoints, fileContent } = currentFile
+    const { checkpoints, fileContent } = currentFile;
+    if (vendorType === 'TENCENT_COS') {
+      // 腾讯云重新上传
+      ossClient.sliceUploadFile({
+        Bucket: bucket,
+        Region: TX_UPLOAD_REGION,
+        Key: ossUri,
+        Body: fileContent,
+        SliceSize: UPLOAD_PART_SIZE,
+        // 回调配置
+        Callback: callback,
+        onProgress: (progressData) => {
+          const progress = progressData.percent;
+          this.onMultipartUploadProgress(progress, { uploadId: randomString(16), file: fileContent }, currentFile);
+        },
+        onTaskReady: (taskId) => {
+          currentFile.taskId = taskId;
+        },
+      })
+      .then(res => {
+        currentFile.status = 'success';
+        this.setState({ fileList });
+        this.props.onUpload(fileContent, resourceId);
+      })
+      .catch(err => {
+        currentFile.status = 'fail';
+        this.setState({ fileList });
+      });
+    } else {
+      // 阿里云断点续传
      Object.values(checkpoints).forEach(checkpoint => {
        const { uploadId, file } = checkpoint;
        ossClient.multipartUpload(uploadId, file, {
          callback: {
-          url: callBack,
+            url: callbackData.url,
-          body: callbackBody,
+            body: callbackData.body,
-          contentType: 'application/json',
+            callbackSNI: true,
+            contentType: callbackData.contentType
          },
          checkpoint,
          parallel: UPLOAD_PARALLEL,
@@ -185,7 +264,8 @@ class UploadProgressModal extends React.Component {
          currentFile.status = 'fail';
          this.setState({ fileList });
        });
-    })
+      });
+    }
  }
  // 显示/隐藏上传进度
@@ -198,7 +278,7 @@ class UploadProgressModal extends React.Component {
  // 取消上传
  handleCancelAllUpload = () => {
    // 判断是否有正在上传或者待上传的文件，有的话弹出二次提示框
-    const { fileList, ossClient } = this.state;
+    const { fileList, ossClient, vendorType } = this.state;
    const uploadingFileList = fileList.filter(file => file.status === 'uploading' || file.status === 'waiting');
    if (uploadingFileList.length) {
      Modal.confirm({
@@ -207,15 +287,22 @@ class UploadProgressModal extends React.Component {
        icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
        onOk: () => {
          uploadingFileList.forEach((uploadingFile, index) => {
+            if (vendorType === 'TENCENT_COS') {
+              // 腾讯云取消上传
+              if (uploadingFile.taskId) {
+                ossClient.cancelTask(uploadingFile.taskId);
+              }
+            } else {
+              // 阿里云取消上传
              const { checkpoints } = uploadingFile;
              Object.values(checkpoints).forEach(checkpoint => {
                const { uploadId, name } = checkpoint;
                ossClient.abortMultipartUpload(name, uploadId);
              });
+            }
            fileList.splice(index, 1);
-          })
+          });
+          this.setState({ fileList: [] });
-          this.setState({ fileList });
          this.props.onCancel();
        }
      })
@@ -227,12 +314,21 @@ class UploadProgressModal extends React.Component {
  // 取消单个文件上传
  handleCancelUpload = (currentFile, index) => {
-    const { fileList, ossClient } = this.state;
+    const { fileList, ossClient, vendorType } = this.state;
+    if (vendorType === 'TENCENT_COS') {
+      // 腾讯云取消上传
+      if (currentFile.taskId) {
+        ossClient.cancelTask(currentFile.taskId);
+      }
+    } else {
+      // 阿里云取消上传
      const { checkpoints } = currentFile;
      Object.values(checkpoints).forEach(checkpoint => {
        const { uploadId, name } = checkpoint;
        ossClient.abortMultipartUpload(name, uploadId);
      });
+    }
    fileList.splice(index, 1);
    this.setState({ fileList });