You need to enable JavaScript to run this app.
导航
快速开始
最近更新时间:2024.05.27 17:51:19首次发布时间:2024.03.19 14:39:41

本文为您介绍 Web 上传 SDK 的快速开始,包含引入 SDK、初始化上传配置、添加上传文件、设置监听事件和开始上传等内容。

引入 SDK

您可根据实际需要选择以下任意一种方式引入 SDK。

npm install tt-uploader
   

初始化上传配置

参考以下示例代码始化 TTUploader 实例:

import TTUploader from 'tt-uploader';
const uploader = new TTUploader({
  userId: 'xxx', // 建议设置能识别用户的唯一标识 ID,用于上传出错时排查问题,不要传入非 ASCII 编码
  appId: xxx, // 在视频点播-应用服务中创建的 AppID,视频点播的质量监控等都是以这个参数来区分业务方的,务必正确填写
  // 仅视频/普通文件上传时需要配置
  videoConfig: {
    spaceName: 'xxx' //在视频点播中申请的点播空间名
  }
});

说明

  • 登录视频点播控制台,在点播 SDK > 新建应用,创建应用并获取 AppID,详情操作请参见新建应用
  • 默认上传支持的区域:华北 cn-north-1
  • 更多初始化配置请见 initConfig

添加上传文件

调用 addFile 方法添加上传文件,示例代码如下所示。

const fileKey = uploader.addFile({
    file: Blob,
    stsToken: token, //从服务端拿到的 token,见下方说明
    type : 'video', // 上传文件类型,四个可选值:video(视频或者音频,默认值),image(图片),object(普通文件,例如字幕),media(素材文件)
});

stsToken 签名生成 SDK

上传前需要从服务端获取上传临时安全凭证 UploadAuthToken。为方便您的使用,视频点播服务端 SDK 对 UploadAuthToken 的签发进行了封装,详见以下文档:

说明

由于签名计算放在前端会暴露 AccessKey 和 SecretKey,我们把签名计算过程放在服务端实现,利用签名 SDK 可以生成一对临时的 AK、SK,前端通过 Ajax 向后端获取签名结果,正式部署时请在后端加一层自己网站本身的权限检验。

设置监听事件

参考以下示例代码设置监听事件:

uploader.on('complete', (infor) => {
    console.log('complete');
    console.log(infor.uploadResult);
});

uploader.on('error', (infor) => {
    console.log(infor.extra);
});

uploader.on('progress', (infor) => {
    console.log(infor.percent)
});

详情请参见生命周期

开始上传

调用 start 方法开始上传文件,您需传入添加上传文件返回的 filekey 值。示例代码如下所示。

uploader.start(fileKey);