视频点播如何使用JS SDK进行上传服务？ - 文章 - 开发者社区

前言

本文介绍视频点播服务如何使用 JS SDK 进行上传服务

前期准备

本地创建项目工程文件夹，并安装 npm 服务
使用 npm 安装 JS SDK npm install tt-uploader
使用服务端SDK 生成测试 ststoken

示例代码

html 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Js-SDK Demo</title>
    <script src="./node_modules/tt-uploader/dist/index.js"></script>
    <script src ="./upload.js"></script>
</head>
<body>
    <div style="text-align: center; padding-top: 50px">
        <div style="font-size: 16px; color: #44A1F8;padding-bottom: 50px">JS-SDK Demo</div>
        <input type="file" id="avatar" />
        <button onclick="to_upload_volc()">上传</button>
        <br>
        <br>
        <div style="text-align: left;display: inline-block;width: 300px; height: 20px; border: 1px solid #44A1F8; border-radius: 2px;position: relative">
            <div id="progress_bar" style="display: inline-block; width: 0px; height: 20px;background-color: #64B587"></div>
            <div style="text-align: center;width: 300px;position: absolute; top: 0; font-size:16px; color: #413F43">
                <div id="loading">
                    上传进度0%
                </div>
               
            </div>
            
        </div>
    </div>
</body>
</html>

js 示例代码

const uploader = new TTUploader({
    userId: '2100046944',
    appId: '', 
    videoConfig:{
        spaceName:  'demo'
    }
});


uploader.on('complete', (infor) => {
    console.log('complete');
    var progress_bar = document.getElementById("progress_bar");
    var loading_dom = document.getElementById("loading");
    loading_dom.innerHTML = "上传成功^_^";
    progress_bar.style.width = String(100 * 3) + "px";
    var result_dom=document.getElementById("result");
    console.log(infor.uploadResult)
    result_dom.innerHTML = infor.uploadResult.Vid;
});

uploader.on('error', (infor) => {
    console.log(infor.extra);
});

uploader.on('progress', (infor) => {
    progressFunction(infor.percent)
});

function progressFunction(e){
    var progress_bar = document.getElementById("progress_bar");
    var loading_dom = document.getElementById("loading");
    console.log("loading::", e);

     
    if(e === 100){
        loading_dom.innerHTML = "上传成功^_^";
    }else{
        loading_dom.innerHTML = "上传进度"+e+"%"
    }
    
    progress_bar.style.width = String(e * 3) + "px";
}


function to_upload_volc(){
    let file_obj = document.getElementById("avatar").files[0];
    const token = {}

    const fileKey = uploader.addFile({
        file: file_obj,
        stsToken: token,
        type : 'video'
    })
    if(file_obj){
        uploader.start(fileKey);
    }else{
        alert("请先选择文件后再上传")
    }

}

服务端生成ststoken（python为例）

# coding:utf-8
from __future__ import print_function

from volcengine.imagex.ImageXService import ImageXService

if __name__ == '__main__':
    imagex_service = ImageXService()

    # call below method if you dont set ak and sk in $HOME/.volc/config
    imagex_service.set_ak('ak')
    imagex_service.set_sk('sk')

    # service id list allowed to do upload, set to empty if no restriction
    service_ids = ['imagex service id']

    resp = imagex_service.get_upload_auth(service_ids)
    print(resp)

如果您有其他问题，欢迎您联系火山引擎技术支持服务