本文为您介绍如何将 Web 上传 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' //在视频点播中申请的点播空间名 } });
说明
cn-north-1
。调用 addFile
方法添加上传文件,示例代码如下所示。
const fileKey = uploader.addFile({ file: Blob, stsToken: token, //从服务端拿到的 token,见下方说明 type : 'video', // 上传文件类型,四个可选值:video(视频或者音频,默认值),image(图片),object(普通文件,例如字幕),media(素材文件) });
上传前需要从服务端获取临时上传凭证 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);