上传视频优化

src/utils/cos.js

@@ -1,97 +1,102 @@
-import COS from 'cos-js-sdk-v5';
-import { Message } from 'element-ui';
-import { getTmpSecretKey } from '@/api/common';
+import COS from "cos-js-sdk-v5"
+import { getTmpSecretKey } from "@/api/common"
 
-console.log('环境变量：', process.env);
-console.log('NODE_ENV:', process.env.NODE_ENV);
-console.log('VUE_APP_COS_BUCKET:', process.env.VUE_APP_COS_BUCKET);
-console.log('VUE_APP_COS_REGION:', process.env.VUE_APP_COS_REGION);
+console.log("环境变量：", process.env)
+console.log("NODE_ENV:", process.env.NODE_ENV)
+console.log("VUE_APP_COS_BUCKET:", process.env.VUE_APP_COS_BUCKET)
+console.log("VUE_APP_COS_REGION:", process.env.VUE_APP_COS_REGION)
 
 const config = {
   Bucket: process.env.VUE_APP_COS_BUCKET,
   Region: process.env.VUE_APP_COS_REGION,
-};
-console.log('COS配置：', config);
+}
+console.log("COS配置：", config)
 
-// 上传到腾讯云cos
-export const uploadObject = async (file,onProgress,type,callBackUp) => {
-    try {
-        console.log(type);
-        const response = await getTmpSecretKey(); // 后台接口返回 密钥相关信息
-        console.log("Key  ",response);
-        const data = response.data;
-        const credentials = data && data.credentials;
+export const uploadObject = async (file, onProgress, type, callBackUp) => {
+  try {
+    console.log(type)
+    const response = await getTmpSecretKey()
+    console.log("Key  ", response)
+    const data = response.data
+    const credentials = data && data.credentials
 
-        if (!data || !credentials) {
-            console.error('未获取到参数');
-            return;
-        }
+    if (!data || !credentials) {
+      console.error("未获取到参数")
+      return
+    }
+
+    const cos = new COS({
+      Timeout: 1200 * 1000,
+      getAuthorization: (options, callback) => {
+        callback({
+          TmpSecretId: credentials.tmpSecretId,
+          TmpSecretKey: credentials.tmpSecretKey,
+          XCosSecurityToken: credentials.sessionToken,
+          StartTime: data.startTime,
+          ExpiredTime: data.expiredTime,
+        })
+      },
+    })
 
-        // 初始化
-        const cos = new COS({
-            Timeout: 1200 * 1000,
-            getAuthorization: (options, callback) => {
-                callback({
-                    TmpSecretId: credentials.tmpSecretId,
-                    TmpSecretKey: credentials.tmpSecretKey,
-                    XCosSecurityToken: credentials.sessionToken,
-                    StartTime: data.startTime,
-                    ExpiredTime: data.expiredTime,
-                });
-            },
-        });
+    console.log("初始化成功")
+    const fileName = file.name || ""
+    const upload_file_name = new Date().getTime() + "." + fileName.split(".")[fileName.split(".").length - 1]
+    const date = new Date()
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1
+    const strDate = date.getDate()
+    const uploadDay = `${year}${month}${strDate}`
+    const videoKey = `/userVideo/${uploadDay}/${upload_file_name}`
+    const courseKey = `/course/${uploadDay}/${upload_file_name}`
+    const key = type === 1 ? courseKey : videoKey
+    console.log("开始上传")
 
-        console.log("初始化成功")
-        let fileName = file.name || ""
-        const upload_file_name = new Date().getTime() + '.' + fileName.split(".")[fileName.split(".").length - 1];
-        let date =  new Date()
-        let year = date.getFullYear()
-        let month = date.getMonth() + 1
-        let strDate = date.getDate()
-        let uploadDay = `${year}${month}${strDate}`
-        let videoKey = `/userVideo/${uploadDay}/${upload_file_name}`
-        let courseKey = `/course/${uploadDay}/${upload_file_name}`
-        let key = type ===1 ? courseKey : videoKey;
-        console.log("开始上传")
-        return new Promise((resolve, reject) => {
-            console.log("uploadFile")
-            cos.uploadFile(
-                {
-                    Bucket: config.Bucket, /* 必须 */
-                    Region: config.Region, /* 存储桶所在地域，必须字段 */
-                    Key: key, // 文件名
-                    StorageClass: 'STANDARD', // 上传类型，可选
-                    Body: file, // 上传文件对象
-                    // onTaskReady: function (taskId) {
-                    //     // 用于中断分片上传回调
-                    //     console.log('Task ready:', taskId);
-                    //     callBackUp && callBackUp({cos,taskId})
-                    // },
-                    onProgress: function (progressData) {
-                        console.log('COS上传进度=======>:', JSON.stringify(progressData));
-                        onProgress(progressData);
-                    },
-                    // onFileFinish: function (err, data, options) {
-                    //     console.log(options.Key + '上传' + (err ? '失败' : '完成'));
-                    // },
+    return new Promise((resolve, reject) => {
+      console.log("uploadFile")
+      let taskId = null
+
+      const uploadTask = cos.uploadFile(
+        {
+          Bucket: config.Bucket,
+          Region: config.Region,
+          Key: key,
+          StorageClass: "STANDARD",
+          Body: file,
+          onTaskReady: (id) => {
+            taskId = id
+            console.log("Task ready:", taskId)
+            if (callBackUp) {
+              callBackUp({
+                cos,
+                taskId,
+                cancel: () => {
+                  console.log("Cancelling COS upload:", taskId)
+                  cos.cancelTask(taskId)
+                  reject(new Error("Upload cancelled by user"))
                 },
-                (err, data) => {
-                    if (err) {
-                        reject(err);
-                    } else {
-                        // 将上传的key包含在返回的数据中
-                        const result = {
-                            ...data,
-                            urlPath: key
-                        };
-                        console.log('上传成功', result);
-                        resolve(result);
-                    }
-                }
-            );
-        });
-    } catch (error) {
-        console.error('Error during upload:', error);
-        throw error;
-    }
-};
+              })
+            }
+          },
+          onProgress: (progressData) => {
+            onProgress(progressData)
+          },
+        },
+        (err, data) => {
+          if (err) {
+            reject(err)
+          } else {
+            const result = {
+              ...data,
+              urlPath: key,
+            }
+            console.log("上传成功", result)
+            resolve(result)
+          }
+        },
+      )
+    })
+  } catch (error) {
+    console.error("Error during upload:", error)
+    throw error
+  }
+}

src/utils/obs.js

@@ -1,56 +1,73 @@
-import ObsClient from "esdk-obs-browserjs/src/obs";
+import ObsClient from "esdk-obs-browserjs/src/obs"
 
+export const uploadToOBS = async (file, progressCallback, type, cancelCallback) => {
+  try {
+    const obsClient = new ObsClient({
+      access_key_id: process.env.VUE_APP_OBS_ACCESS_KEY_ID,
+      secret_access_key: process.env.VUE_APP_OBS_SECRET_ACCESS_KEY,
+      server: process.env.VUE_APP_OBS_SERVER,
+      timeout: 1200,
+    })
 
-export const uploadToOBS = async(file,progressCallback,type) =>  {
-    try {
-        const obsClient = new ObsClient({
-          access_key_id: process.env.VUE_APP_OBS_ACCESS_KEY_ID,
-          secret_access_key: process.env.VUE_APP_OBS_SECRET_ACCESS_KEY,
-          server: process.env.VUE_APP_OBS_SERVER,
-          timeout: 1200,
-        });
-        let fileName = file.name || ""
-        const upload_file_name = new Date().getTime() + '.' + fileName.split(".")[fileName.split(".").length - 1];
-        let date =  new Date()
-        let year = date.getFullYear()
-        let month = date.getMonth() + 1
-        let strDate = date.getDate()
-        let uploadDay = `${year}${month}${strDate}`
-        let videoKey = `userVideo/${uploadDay}/${upload_file_name}`
-        let courseKey = `course/${uploadDay}/${upload_file_name}`
-        let key = type ===1 ? courseKey : videoKey;
-        var callback = function (transferredAmount, totalAmount, totalSeconds) {
-            // 获取上传进度百分比
-            const progress = parseInt(transferredAmount * 100.0 / totalAmount);
-            console.log("OBS上传进度=========>",progress);
-            if (progressCallback) {
-              progressCallback(progress);
-            }
-          };
-        return new Promise((resolve, reject) => {
-            //上传对象
-            obsClient.putObject({
-                Bucket: process.env.VUE_APP_OBS_BUCKET,//桶名称
-                Key: key,//文件名
-                Body: file,
-                ProgressCallback: callback,//进度回调
-            }, (err, result) => {
-                if(err){
-                    reject(err);
-                    console.error('Error-->' + err);
-                }else{
-                  // 将上传的key包含在返回的数据中
-                  const a = {
-                    ...result,
-                    urlPath: key
-                  };
-                  console.log('上传成功', a);
-                  resolve(a);
-                }
-            });
-        });
-    } catch (error) {
-        console.error('Error during upload:', error);
-        throw error;
+    const fileName = file.name || ""
+    const upload_file_name = new Date().getTime() + "." + fileName.split(".")[fileName.split(".").length - 1]
+    const date = new Date()
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1
+    const strDate = date.getDate()
+    const uploadDay = `${year}${month}${strDate}`
+    const videoKey = `userVideo/${uploadDay}/${upload_file_name}`
+    const courseKey = `course/${uploadDay}/${upload_file_name}`
+    const key = type === 1 ? courseKey : videoKey
+
+    var callback = (transferredAmount, totalAmount, totalSeconds) => {
+      const progress = Number.parseInt((transferredAmount * 100.0) / totalAmount)
+      if (progressCallback) {
+        progressCallback(progress)
+      }
     }
+
+    return new Promise((resolve, reject) => {
+      let isCancelled = false
+
+      if (cancelCallback) {
+        cancelCallback({
+          cancel: () => {
+            console.log("Cancelling OBS upload")
+            isCancelled = true
+            reject(new Error("Upload cancelled by user"))
+          },
+        })
+      }
+
+      obsClient.putObject(
+        {
+          Bucket: process.env.VUE_APP_OBS_BUCKET,
+          Key: key,
+          Body: file,
+          ProgressCallback: callback,
+        },
+        (err, result) => {
+          if (isCancelled) {
+            return // Don't process result if cancelled
+          }
+
+          if (err) {
+            reject(err)
+            console.error("Error-->" + err)
+          } else {
+            const a = {
+              ...result,
+              urlPath: key,
+            }
+            console.log("上传成功", a)
+            resolve(a)
+          }
+        },
+      )
+    })
+  } catch (error) {
+    console.error("Error during upload:", error)
+    throw error
+  }
 }