本文为您介绍如何将 Web 上传 SDK 集成至您的项目，包含引入 SDK、初始化上传配置、添加上传文件、设置监听事件和开始上传等内容。

前提条件 #

• 已注册火山引擎账号。如果您首次登录火山引擎控制台，请先完成实名认证。
• 已开通视频点播服务。
• 在视频点播控制台创建空间。
• 在视频点播控制台创建应用并获取 App ID。详情请见应用管理。
• 在应用服务端通过视频点播服务端 SDK 签发临时上传 Token，下发给客户端，再设置给 SDK。鉴权参数说明详见客户端上传。

引入 SDK #

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

npm install tt-uploader

<script src="https://unpkg.com/tt-uploader@{SDK_VERSION}/dist/index.js"></script>

初始化上传配置 #

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

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

添加上传文件 #

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

const fileKey = uploader.addFile({
    file: Blob,
    stsToken: token, // 从应用服务端获取到的临时上传 token
    type : 'video', // 上传文件类型，四个可选值：video（视频或者音频，默认值），image（图片），object（普通文件，例如字幕），media（素材文件）
});

设置监听事件 #

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

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);