項(xiàng)目技術(shù)棧：vue、vite、ts
官網(wǎng)地址：https://cloud.tencent.com/act/event/video_BestPractices?
上傳視頻文檔：https://cloud.tencent.com/document/product/266/9239
預(yù)覽視頻文檔：https://rtcube.cloud.tencent.com/component/experience-center/index.html#/detail?scene=player

關(guān)于 vod-js-sdk-v6 與 cos-js-sdk-v5 區(qū)別

• 如果應(yīng)用場景是通用文件存儲(chǔ)，例如上傳用戶頭像、保存文檔、分享圖片等，與騰訊云對象存儲(chǔ)（COS）直接交互，那么cos-js-sdk-v5更合適。
• 如果業(yè)務(wù)核心是視頻相關(guān)，例如在線教育、短視頻、媒體門戶等，并且需要使用騰訊云點(diǎn)播提供的視頻轉(zhuǎn)碼、內(nèi)容審核、密鑰防盜鏈、超級(jí)播放器等能力，那么vod-js-sdk-v6更適合

注意事項(xiàng)：

• 簽名安全至關(guān)重要：getSignature 函數(shù)必須通過后端服務(wù)器實(shí)現(xiàn)，絕對不能在前端直接計(jì)算密鑰
• 斷點(diǎn)續(xù)傳：SDK內(nèi)置支持。上傳意外中斷后再次上傳同一文件，會(huì)從中斷處繼續(xù)
• 上傳進(jìn)度監(jiān)控：通過監(jiān)聽 media_progress 事件實(shí)現(xiàn)
• 動(dòng)態(tài)上傳加速：從 1.7.0-beta.4 版本開始，SDK支持通過 dynamicAccelerate: true 參數(shù)開啟動(dòng)態(tài)加速，提升上傳速度（需在騰訊云控制臺(tái)開啟全球鏈路加速）
• SDK依賴 Promise，如果需要支持低版本瀏覽器，需要自行引入 Promise 的 polyfill
• 上傳的文件最大支持 60GB

封裝Hooks代碼如下：

import TcVod from 'vod-js-sdk-v6';
import request from '@/utils/request'
import { ResultInter } from '@/api/types'

interface VodUploader {
  on: (event: string, callback: (info: any) => void) => void;
  done: () => Promise<any>;
  cancel: () => void; // 添加 cancel 方法
}

let tcVod: any = null // 騰訊云VOD實(shí)例
const uploaderList = new Set<VodUploader>(); // 存儲(chǔ)所有活動(dòng)的上傳器實(shí)例

/**
 * 獲取上傳簽名
 * @returns {string} 簽名
 */
const getSignature = async (): Promise<string> => {
  // 替換為您自己的后端簽名接口
  const response = await request<ResultInter>({
    method: 'get',
    url: '/golfer/teaching/course/sign',
  });
  // console.log('簽名', response);
  return response.data;
};

/**
 * 處理文件上傳
 * @param file 文件
 * @param onProgress 進(jìn)度回調(diào)
 * @returns {Promise}
 */
const handleVodUpload = (file: File, onProgress?: (percent: number) => void): Promise<any> => {
  console.log('開始上傳文件', file);
  return new Promise((resolve, reject) => { 
    if (!file) {
      reject(new Error('文件為空'));
      return;
    }
    if (file.size === 0) {
      reject(new Error('文件為空'));
      return;
    }

    if (!tcVod) {
      tcVod = new TcVod({
        getSignature: getSignature
      });
    }

    const uploader = tcVod.upload({
      mediaFile: file
    })

    // 添加到上傳器集合
    uploaderList.add(uploader);

    // 監(jiān)聽上傳進(jìn)度
    uploader.on('media_progress', (info: any) => {
      const percent = Math.floor(info.percent); // 取整
      // console.log(`上傳進(jìn)度: ${percent}%`);
      // 如果有進(jìn)度回調(diào)，就執(zhí)行
      if (onProgress) {
        onProgress(percent);
      }
    });
    
    // 開始上傳
    uploader.done().then((doneResult: any) => {
      // console.log('上傳成功', doneResult);
      resolve(doneResult);
    }).catch((err: any) => {
      console.error('上傳失敗', err);
      reject(err);
    }).finally(() => {
      // 上傳完成后從集合中移除
      if (uploader && uploaderList.has(uploader)) {
        uploaderList.delete(uploader);
      }
    })
  });
};

/**
 * 取消所有上傳
 */
const cancelAllVodUpload = () => {
  // 遍歷所有上傳器并取消
  uploaderList.forEach(uploader => {
    try {
      uploader?.cancel();
    } catch (error) {
      console.error('取消上傳時(shí)出錯(cuò):', error);
    }
  });
  // 清空上傳器集合
  uploaderList.clear();
}

// 格式化文件大小顯示
const formatFileSize = (bytes?: number): string => {
  if (!bytes) return '--'
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

export {
  getSignature,
  formatFileSize,
  handleVodUpload,
  cancelAllVodUpload
}

使用示例：

import { handleVodUpload, cancelAllVodUpload, formatFileSize } from '@/hooks/useVod'

const result = await handleVodUpload(fileItem.file, (progress) => {
   console.log(`上傳進(jìn)度回調(diào)：${progress}%`)
})
console.log('上傳完成:', result)

鏈接匯總