CDN加速

文档中心 云点播 开发手册 JavaScript 上传SDK

JavaScript 上传SDK

更新时间:2021-05-10 09:45:31

简介

云点播服务支持采用网宿云存储JS版上传SDK,用于嵌入到web页面中,实现在web端上传文件到云点播中。

SDK安装

在页面上引入sdk脚本,sdk下载地址

<script src="cloudv.upload.sdk.js"></script>

集成步骤

  • ClientServer开发接口调用cloudv api视频获取Token接口
  • 初始化上传实例
  • 回调设置,文件上传过程回调,包括sdk初始化回调、文件上传前回调、文件开始上传回调、文件上传进度回调、文件上传完成回调、异常回调。
  • 点击选择文件按钮(初始化参数browseButton对应的按钮),选择文件上传
  • 调用实例start方法,启动上传
  • 处理回调,完成上传逻辑

上传Token获取

  • 获取上传Token流程:
    • js请求ClientServer接口
    • ClientServer拼凑鉴权参数调用cloudv api获取Token接口
  • 设置文件上传Token与Domain方法
    • 在beforeUpload回调事件,根据文件类型调用ClientServer不同类型(音频、视频、素材)的上传Token接口,并且调用setUploadInfo方法设置uploadToken和uploadUrl

初始化实例

初始化主要完成上传按钮绑定、分片大小、最大重试次数、最大待上传数、文件类型过滤

  • 初始化实例
var cloudvUploader = new cloudvUploadJSSDK({
 browseButton: 'selectFile',// 选择文件按钮DOM节点或者id
 chunkSize: 32, //分块上传时,每片的体积,必须为4的倍数(单位为mb)
 maxRetries: 0,// 最多重试次数
 maxFileNumbers: 4,// 最大待上传数
 maxFileSize: "100mb",// 当chunkSize不存在到时候,该值有效
 fileTypes: ["mp4", "flv", "mp3"],//文件类型
 dropElement: "drop-area",
 preventDuplicates: true, // 是否允许选择重复文件
 multiSelection: true,// 选择文件窗口是否可以选择多个文件
 // sdk初始化成功回调
 onPostInit: function () {
 },
 // 文件上传前回调事件
 onBeforeUpload: function (file) {
	//调用setUploadInfo上传凭证和上传地址
 },
 // 文件开始上传回调事件
 onUploadFile: function (file) {
 },
 // 文件上传进度回调事件
 onUploadProgress: function (file, total) {
 },
 // 文件上传完成回调事件
 onUploadComplete: function (files) {
 },
 // 文件添加回调事件
 onFilesAdded: function (files, total) {
 },
 // 文件移除回调事件
 onFilesRemoved: function (files) {
 },
 // 错误回调事件
 onError: function (err) {
 }
});
  • 参数说明
    见底下参数说明2
  • 实例提供的方法和属性
    • state:1未开始 2已开始
    • setUploadInfo:设置上传凭证和上传地址
onBeforeUpload: function (file) {
 	//请求ClientServer接口获取uploadToken和uploadUrl,见demo(注:需要使用同步方法请求,很重要)
	cloudvUploader.setUploadInfo(file, uploadToken, uploadUrl);
}
- addFile:添加文件
cloudvUploader.addFile(file);//file 可以为文件原生对象,也可以为cloudvUploadJSSDK实例的file对象
- removeFile:移除文件
cloudvUploader.removeFile(file);//file 为cloudvUploadJSSDK实例的file对象或者file的id
- start:开始上传
cloudvUploader.start();
- stop: 停止上传
cloudvUploader.stop();
- destroy:销毁实例
cloudvUploader.destroy();
- getUnuploadFiles:获取待上传文件列表
cloudvUploader.getUnuploadFiles();
- getUploadedFiles: 获取已经上传(上传成功)文件列表
 cloudvUploader.getUploadedFiles();
- retryFile:重新上传文件
cloudvUploader.retryFile(file);//file为cloudvUploadJSSDK实例的file对象或者file的id

参数说明

1.初始化参数说明

属性 类型 是否必填 默认值 描述 回调出参
debug Boolean false 是否显示控制台调试日志信息
browseButto String/DOM 选择文件按钮DOM节点或者id
chunkSize Number 32 分块上传时,每片的体积,必须为4的倍数(单位为mb)
maxRetries Number 0 最多重试次数
maxFileNumbers Number 不限制 最大待上传数
maxFileSize Number/String 500mb 最大文件大小
fileTypes Array 允许上传的文件类型,*代表所有类型
dropElement String false 拖拽上传区域的DOM节点或者id(非必填,默认不开启拖拽)
preventDuplicates Boolean true 不允许选择重复文件
multiSelection Boolean true 选择文件窗口是否可以选择多个文件
onPostInit Function sdk初始化成功回调
onBeforeUpload Function 文件上传前回调事件 file:cloudvUploadJSSDK实例的file对象
onUploadFile Function 文件开始上传回调事件 file:cloudvUploadJSSDK实例的file对象
onUploadProgress Function 文件上传进度回调事件 file:cloudvUploadJSSDK实例的file对象
total:total对象,详见底下参数说明3
onFileUploaded Function 文件上传完成回调事件 file:cloudvUploadJSSDK实例的file对象
info:info对象, 详见底下参数说明4
onUploadComplete Function 队列所有文件上传完成回调事件 files:cloudvUploadJSSDK实例的file对象列表
onFilesAdded Function 文件添加回调事件 file:cloudvUploadJSSDK实例的file对象
total:total对象,详见底下参数说明3
onFilesRemoved Function 文件移除回调事件 files:cloudvUploadJSSDK实例的file对象列表
onError Function 错误回调事件 code: 错误码,详见底下参数说明
fileList:cloudvUploadJSSDK实例的file对象
message:错误信息status:http状态码

###2.total对象属性

  • size:上传队列中所有文件加起来的总大小,单位为字节
  • loaded:队列中当前已上传文件加起来的总大小,单位为字节
  • uploaded:已完成上传的文件的数量
  • failed:上传失败的文件数量
  • queued:队列中剩下的(也就是除开已经完成上传的文件)需要上传的文件数量
  • percent:整个队列的已上传百分比,如50就代表50%
  • bytesPerSec:上传速率,单位为 byte/s,也就是 字节/秒

3.info对象

  • response:服务器返回的文本
    上传接口返回的事例:
// response返回success 0表示成功
  {
      response: "{"hash":"Fl1ebHmEEqnaN06fk9g_cfi6H92m","response":"{success:0}"}"
      responseHeaders: "content-length: 57"
      status: 200
  }
  • responseHeaders:服务器返回的头信息
  • status:服务器返回的http状态码,比如200

4.onError错误码

code 描述
-100 发生通用错误时的错误代码
-200 发生http网络错误时的错误代码,例如服务气端返回的状态码不是200
-201 登陆会话失效
-202 获取token接口失败
-203 分片上传mkfile失败
-300 发生磁盘读写错误时的错误代码,例如本地上某个文件不可读
-400 发生因为安全问题而产生的错误时的错误代码
-500 初始化时发生错误的错误代码
-600 当选择的文件太大时的错误代码
-601 当选择的文件类型不符合要求时的错误代码
-602 当选取了重复的文件而配置中又不允许有重复文件时的错误代码
-603 超过一次性上传最大文件数
-604 文件处理失败,请检查文件是否正确
-700 发生图片格式错误时的错误代码
-702 当文件大小超过了sdk能处理的最大值时的错误代码
-800 参数错误
-801 参数为空
-802 参数缺失
-803 待上传列表为空
-804 视频名称,超过200个字符

file 对象属性

属性名 描述
fileId 文件ID
name 文件名
type 文件类型
extension 文件后缀
size 文件大小,单位为字节,当启用了客户端压缩功能后,该值可能会改变
sizeFormat 格式化后的文件大小(带单位的字符串)
origSize 文件的原始大小,单位为字节
loaded 文件已上传部分的大小,单位为字节
percent 文件已上传部分所占的百分比,如50就代表已上传了50%
status 文件的状态,可能为以下几个值之一:QUEUED = 1, UPLOADING = 2, FAILED = 4, DONE = 5
lastModifiedDate 文件最后修改的时间