本文为您介绍如何通过 Web SDK 上传素材文件。

初始化上传配置 #

在初始化 TTUploader 实例时，您可以通过 initConfig 进行初始化配置。详见具体参数配置。

const uploader = new TTUploader(initConfig);

代码示例如下：

const uploader = new TTUploader({
    // 必填，在我的应用中申请的 AppID
    appId: '',
    // 必填，建议设置能识别用户的唯一标识 ID，用于上传出错时排查问题，不要传入非 ASCII 编码  
    userId: '',
    // 必填，上传相关配置
    videoConfig: {
        // 必填，上传到的点播空间名
        spaceName: '',
        // 非必填，视频/文件上传后的处理 action 对象，类型是一个数组，有多个处理请求时可以配置多个动作对象。对象中的 input 会被透传到对应的处理服务中
    }
});

添加上传文件 #

调用 addFile 方法，设置 stsToken 签名，同时素材需要在 processAction 数组中添加 AddOptionInfo ，并指明素材相关信息，具体参数说明请见接口说明。代码示例如下：

const fileKey = ttUploader.addFile({
    file: fileList[0],
    stsToken: {   // 从服务端拿到的 ststoken，token 为一个包含多个属性的对象
        CurrentTime: 'xxx',
        ExpiredTime: 'xxx',
        SessionToken: 'xxx',
        AccessKeyID: 'xxx',
        SecretAccessKey: 'xxx'
    }, 
    type : 'image', // 类型设置为图片素材

    processAction: [
           {
                Name: 'AddOptionInfo',  // 添加可选信息
            input: {
                RecordType: 2,
                Category: 'image' // 当 RecordType 取值为 2 素材时，可选 video、audio 等值
            }
           }
    ]
  });

  

开始上传 #

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

uploader.start(fileKey);

设置监听事件 #

设置监听事件示例代码如下，具体说明请参见生命周期。

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