腾讯云点播Web端上传视频+SDK使用

官方链接：
Web 端上传 SDK
腾讯云控制台
客户端上传签名
签名生成示例

1、Web端嵌入云点播SDK

// 安装稳定版本
npm install vod-js-sdk-v6

在对应的页面引入

import TcVod from 'vod-js-sdk-v6'

入完成后，需要生成签名，签名需要通过SecretId、SecretKey来生成
SecretId、SecretKey生成：腾讯云控制台
进入云控制台后，点击新建密钥：

获取到密钥后，通过密钥生成签名：

这一步获取签名其实是前端模拟的，正确的应该是后端提供接口，返回签名，后端如何生成签名在本文开头的签名生成示例中有介绍。

export const getSignature = async () => {
  return new Promise((resolve, reject) => {
    var querystring = require("querystring");
    var crypto = require("crypto");

    // 确定 app 的云 API 密钥
    var secret_id = "你的SecretId";
    var secret_key = "你的SecretKey";

    // 确定签名的当前时间和失效时间
    var current = parseInt(new Date().getTime() / 1000);
    var expired = current + 86400; // 签名有效期：1天

    // 向参数列表填入参数
    var arg_list = {
      secretId: secret_id,
      currentTimeStamp: current,
      expireTime: expired,
      random: Math.round(Math.random() * Math.pow(2, 32)),
    };

    // 计算签名
    var orignal = querystring.stringify(arg_list);
    var orignal_buffer = new Buffer(orignal, "utf8");

    var hmac = crypto.createHmac("sha1", secret_key);
    var hmac_buffer = hmac.update(orignal_buffer).digest();

    var signature = Buffer.concat([hmac_buffer, orignal_buffer]).toString(
      "base64"
    );
    resolve(signature); // 返回签名
  });
};

在页面中调用getSignature函数拿到签名，通过element上传组件获取file文件，然后实例化TcVod，在实例化的时候，必须传入一个函数，并且该函数内部是一个Promise，该Promise返回签名。
然后通过tcVod.upload函数来上传文件，该函数会返回上传回调，用于监听上传中、上传完、上传结束后的进度和数据。
tcVod实例：

async getSign(file) {
  console.log("file文件", file);
  const tcVod = new TcVod({
    getSignature: getSignature, // 前文中所述的获取上传签名的函数，直接通过Promise传入c
  });
  console.log("tcVod实例", tcVod);
  // 上传
  const uploader = tcVod.upload({
    mediaFile: file, // 媒体文件（视频或音频或图片），类型为 File
  });
  // 上传进度 0开始 1上传完成
  uploader.on("media_progress", function (info) {
    console.log("上传中", info.percent);
  });
  // 上传完成时
  uploader.on("media_upload", function (info) {
    console.log("上传完", info);
  });
  // 上传结束 获取fileID、Url等信息
  uploader.done().then(function (doneResult) {
    console.log("上传结束", doneResult);
    // deal with doneResult
  });
},