JS上传SDK

更新时间: 2023/03/23 17:44:29

简介

JavaScript-SDK是用于浏览器端点播上传的软件开发工具包,提供简单、便捷的方法,方便用户开发上传视频或图片文件的功能。

功能特性

  • 文件上传
  • 断点续传
  • 多文件状态管理

示例代码

upload.js

实现方法

1. 引入JavaScript上传SDK

文件上传依赖jQuery和md5加密库,因此需要提前引入JS文件:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://blueimp.github.io/JavaScript-MD5/js/md5.js"></script>
<script type="text/javascript" src="https://yx-web-nosdn.netease.im/common/318d0b1d6b2157bd700f6f6cd67fdec4/upload.js"></script>

2. 设置初始化相关参数

关联文件选择输入框和上传按钮元素ID,作为配置项参数传入Uploader:

var opt = {
    fileInputId: 'fileInput',
    fileUploadId: 'fileUploadBtn'
}

其他配置项说明:

  • trunkSize:分片大小,最大4MB
  • fileExts:允许上传的文件类型后缀列表(字符串数组)
  • getInitInfo:获取初始化信息,包括:桶名、对象名、token等
  • onError:错误处理函数
  • onProgress:上传进度回调处理函数
  • onUploaded:单文件上传成功的回调函数
  • onAllUploaded:全部文件上传成功的回调函数
  • onAdd:文件添加成功的回调函数
  • noUploadFn:无文件上传时的处理函数
  • exsitFn:文件已存在(待上传)列表中的处理函数
  • mismatchFn:文件格式不匹配的处理函数

具体描述参见:配置项API

3. 初始化

确定配置参数后,通过以下调用进行事件的绑定和相关初始化操作:

<script type="text/javascript">
    Uploader(opt).init();
</script>

4. 文件上传

完成上述步骤后,即完成所有的上传接口调用。当用户选择上传文件后,将通过相关事件完成文件的上传。

5. 断点续传

当文件上传中断后,用户只需重新选择文件提交即可恢复上传(可自定义文件队列和状态管理)。

配置项API

getInitInfo

示例代码请参见upload.js中的描述。

该方法需要以下数据:

  • AppKey:开发者平台分配的appkey
  • Nonce:随机数(随机数,最大长度128个字符)
  • CurTime:当前UTC时间戳,从1970年1月1日0点0分0秒开始到现在的秒数
  • CheckSum:服务器认证需要,格式为SHA1(AppSecret+Nonce+CurTime),16进制字符小写。计算CheckSum的示例代码请参见接口鉴权

请求参数:

名称 类型 说明
file Object 文件对象
callback Function 回调函数

返回值:

onError

参数:

名称 类型 说明
errObj Object 带errCode和errMsg的Object或XHR错误对象

返回值:

onProgress

参数:

名称 类型 说明
curFile Object 文件对象

返回值:

onUploaded

参数:

名称 类型 说明
curFile Object 文件对象

返回值:

onAllUploaded

参数:

返回值:

onAdd

参数:

名称 类型 说明
curFile Object 文件对象

返回值:

noUploadFn

参数:

返回值:

existFn

参数:

返回值:

mismatchFn

参数:

返回值:

版本更新记录

v1.0.0

  1. JavaScript-SDK初始版本,提供文件上传的基本功能,包括:文件上传、断点续传等。

v1.1.0

  1. 增加文件类型限制。
此文档是否对你有帮助?
有帮助
去反馈
  • 简介
  • 功能特性
  • 示例代码
  • 实现方法
  • 1. 引入JavaScript上传SDK
  • 2. 设置初始化相关参数
  • 3. 初始化
  • 4. 文件上传
  • 5. 断点续传
  • 配置项API
  • getInitInfo
  • onError
  • onProgress
  • onUploaded
  • onAllUploaded
  • onAdd
  • noUploadFn
  • existFn
  • mismatchFn
  • 版本更新记录