You need to enable JavaScript to run this app.
导航
上传素材
最近更新时间:2024.10.16 13:43:03首次发布时间:2024.03.19 14:39:41

本文为您介绍如何通过 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)
});