文档首页> > 客户端SDK参考> 上传SDK> JavaScript上传SDK

JavaScript上传SDK

更新时间: 2018-11-29 20:14

JavaScript上传SDK用于Web端文件的上传,调用JavaScript SDK前请先完成以下配置:

  • 已经在对象存储服务界面创建OBS桶,具体操作跟配置参数如下所示:

    在创建桶页面选择区域,输入桶名称,根据业务需要选择存储类别桶策略,单击“立即创建”。

    说明:
    • 因不同区域的云服务不能互相连接,用户创建的桶所在区域必须和点播服务所在区域保持一致,当前点播服务只对华北区开放,所以请创建华北区的桶。
    • 建议创建存储类别为“标准存储”、桶策略为“私有”的桶。

    表1 存储类别

    存储类别

    适用场景

    标准存储

    适用于有大量热点文件或小文件,且需要频繁访问(平均一个月多次)并快速获取数据的业务场景。

    低频访问存储

    适用于不频繁访问(平均一年少于12次),但需要快速获取数据的业务场景。

    归档存储

    适用于很少访问(平均一年一次),且对数据获取速率要求不高的业务场景。

    表2 桶策略

    桶策略

    说明

    私有

    桶的所有者拥有完全控制权限,其他用户在未经授权的情况下均无访问权限。

    公共读

    任何用户都可以对桶内对象进行读操作,仅桶所有者可以进行写操作。

    公共读写

    任何用户都可以对桶内对象进行读/写/删除操作。

  • 已经设置OBS桶的CORS规则,具体操作和配置参数如下所示:

    单击OBS桶名称链接,选择静态网站托管 > CORS规则,在弹出的“CORS规则”页面单击“增加”创建CORS规则。

    CORS规则配置参数请与下图保持一致。

SDK交互过程如下所示:

以客户端调用上传JavaScript SDK为例,步骤如下:

  1. 租户客户端向租户服务端发起授权请求。
  2. 租户服务端调用VOD的服务端SDK获取临时AK、SK、securityToken。
  3. 将VOD返回的临时AK、SK、securityToken返回给租户客户端。为保证AK、SK的安全性,此处交互建议租户使用HTTPS协议并采取合适的加密手段保证信息传输安全。
  4. 租户客户端调用上传SDK分段上传接口,并传入相关参数,向OBS发起上传。
  5. 上传完成后租户客户端向租户服务端发起请求创建媒资:OBS转存方式,再由租户服务端向VOD发起拷贝创建媒资请求。

兼容性

支持的浏览器版本:

  1. 主流版本的Chrome/Firefox/IE10及以上。
  2. 其他完全支持HTML5的浏览器。

SDK下载

JavaScript上传SDK最新版本,请到SDK开发者中心下载。

安装SDK

在界面上引入如下脚本:

<script src="./dist/jquery-3.3.1.min.js"></script>
<script src="./dist/js-vod-sdk.js"></script>
<script src="./js-obs/esdk-obs-browserjs-2.1.4.min.js"></script>

获取临时AK、SK、securityToken

通过临时AK、SK和securityToken设置,可以自动完成临时鉴权上传。

获取方法请参考:获取临时AK/SK/securityToken

界面demo使用指导

打开VOD-Browers-SDK包的index.html文件,进入Demo界面。

图1 Demo界面

界面参数说明:

  • ak:访问密匙,初始化VodClient。
  • sk:访问密匙,初始化VodClient。
  • security token:安全令牌,初始化VodClient。
  • 桶名 : 租户在OBS创建的桶名。
  • 路径名:需要上传存放到OBS的完整文件路径名。

文件上传方法:

  1. 参考获取临时AK、SK、securityToken获取ak和sk和securityToken,填入界面,bucketName和ObjectKey根据实际情况填写。
  2. 点击“选择文件”选择需要上传的本地文件。
  3. 点击“开始上传”。
  4. 通过下方进度条实时获取上传进度。

API参考

表3 JavaScript上传SDK API参考

方法

请求参数说明

返回参数说明

接口说明

uploadVideoFile

param:上传文件所需参数。

callback:回调函数。

callback(err,data):err为上传过程中出现的错误信息,data为当前文件上传进度。

两者均为必填。

cancelUpload

callback:回调函数。

callback(data):

data为执行取消上传后返回的结果。

回调函数返回值data取值为:

  1. “success: Succeeded in canceling the file upload.”(取消上传成功)。
  2. “ success: Succeeded in canceling the file upload.”(取消上传成功)。

restartUpload

callback:回调函数。

callback(data):

data为执行续传后返回的结果。

回调函数返回值data取值为:

  1. “success: Start to restore the upload.”(执行续传成功)。
  2. “warn: The file is being uploaded.”(执行续传失败,文件正在上传)。

常用属性

表4 JavaScript上传SDK 常用属性

属性

类型

取值

说明

upFlag

Boolean

true/false

表示是否处于上传中状态。

completedFlag

Boolean

true/false

表示文件是否已经完成上传。

代码示例

//通过构造函数创建vodClient实例
var vodClient = new VodClient({
    "access_key_id": '*** Provide your Access Key ***',
    "secret_access_key": '*** Provide your Secret Key ***',
    "security_token": '*** your securityToken ***'
});
//调用分段上传方法
vodClient.uploadVideoFile({
    "bucketName": "*** Provide your BucketName ***",
    "uploadPath": "*** Provide your full file path ***",
    //localfile为待上传文件流
    "video_file": 'localfile'
}, function (err,data) {
  if(err){
    console.error('上传出错,具体信息为:',err);    
  }
  if(data){
    console.log("当前文件上传进度为:",data);
  } 
});
/**
 *取消上传
 * */
function cancelUpload() {
    vodClient.cancelUpload(function (data) {
        console.log(data);
    });
}
/**
 *续传
 * */
function restartUpload() {
    vodClient.restartUpload(function(data){
        console.log(data);
    });
}

代码说明:

VOD客户端(VodClient)是访问VOD服务的JavaScript客户端,它为调用者提供与VOD服务进行交互的接口,用于上传对象、查看对象上传进度等VOD服务上的资源。使用VOD JavaScript SDK发起VOD请求,您需要初始化一个VodClient实例,并根据需求修改客户端初始化配置参数。

  1. 分段上传

    VOD客户端采用分段上传方法,对文件进行分段处理,而后分段上传,具体流程逻辑分为:

    1. 初始化分段上传任务。
    2. 逐个或并行上传段。
    3. 合并段。

    使用者只需将待上传文件流传入uploadVideoFile方法所需参数中,VOD客户端会自动将文件进行分段而后上传至租户的OBS桶中。

  2. 断点续传

    VOD客户端支持断点续传,大文件上传持续时间长,当上传过程中出现网络异常程序崩溃导致上传中断情况时,可以调用断点续传方法继续上传,文件上传时VOD客户端将会自动记录当前上传进度信息,当发生异常中断时,用户只需调用VOD客户端暴露出的restartUpload方法(详情请参考API参考),再次上传时会从上次中断记录点继续上传,节省时间和流量成本,同时VOD客户端也支持用户手动取消上传,当用户想取消上传文件时只需调用VOD客户端暴露出的cancelUpload方法即可(详情请参考API参考)。

文档是否有解决您的问题?

提交成功!

非常感谢您的反馈,我们会继续努力做到更好!

反馈提交失败,请稍后再试!

在文档使用中是否遇到以下问题







请至少选择或填写一项反馈信息

字符长度不能超过100

反馈内容不能为空!

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

跳转到云社区
点我,12·12惊喜等着你哦~