快速开始

本文为您介绍 Web 上传 SDK 的快速开始，包含引入 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（素材文件）
});

stsToken 签名生成 SDK

上传前需要从服务端获取上传临时安全凭证 UploadAuthToken。为方便您的使用，我们对签发 UploadAuthToken 使用进行了封装，提供多语言的 SDK，链接如下所示。

• 获取上传临时安全凭证-Java
• 获取上传临时安全凭证-Python
• 获取上传临时安全凭证-PHP
• 获取上传临时安全凭证-Go
• 获取上传临时安全凭证-Node.js

设置监听事件

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

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