JS 上传 SDK
更新时间: 2025/01/13 13:40:44
JavaScript-SDK 是用于浏览器端点播上传的软件开发工具包,提供简单、便捷的方法,方便用户开发上传视频或图片文件的功能。
功能特性
- 文件上传。
- 断点续传。
- 多文件状态管理。
示例代码
实现方法
1. 引入 SDK
文件上传依赖 md5.js 加密库,因此您需要提前引入 JS 文件:
JavaScript<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/sdk-release/upload_1.2.0.js"></script>
2. 初始化设置
关联文件选择输入框和上传按钮元素 ID,作为配置项参数传入 Uploader:
JavaScriptvar opt = {
fileInputId: 'fileInput',
fileUploadId: 'fileUploadBtn',
getCheckSum: function(){ //获取鉴权信息
return { AppKey, Nonce, CurTime, CheckSum }
}
}
其他配置项说明:
trunkSize:分片大小,最大 4MB。fileExts:允许上传的文件类型后缀列表(字符串数组)。getInitInfo:获取初始化信息,包括桶名、对象名、token 等。onError:错误处理函数。onProgress:上传进度回调处理函数。onUploaded:单文件上传成功的回调函数。onAllUploaded:全部文件上传成功的回调函数。onAdd:文件添加成功的回调函数。noUploadFn:无文件上传时的处理函数。exsitFn:文件已存在(待上传)列表中的处理函数。mismatchFn:文件格式不匹配的处理函数。
具体描述参考 配置项 API。
3. 初始化
确定配置参数后,通过以下调用进行事件的绑定和相关初始化操作:
JavaScript<script type="text/javascript">
const uploader = new Uploader(opt)
uploader.init()
</script>
4. 上传文件
完成上述步骤后,即完成所有的上传接口调用。当用户选择上传文件后,将通过相关事件完成文件的上传。
5. 断点续传
当文件上传中断后,用户只需重新选择文件提交即可恢复上传(可自定义文件队列和状态管理)。
配置项 API
getCheckSum
示例代码请参考 upload.js 中的描述。
该方法需要返回以下数据:
AppKey:开发者平台分配的 appkey。Nonce:随机数(随机数,最大长度 128 个字符)。CurTime:当前 UTC 时间戳,从 1970 年 1 月 1 日 0 点 0 分 0 秒开始到现在的秒数。CheckSum:服务器认证需要,格式为SHA1(AppSecret+Nonce+CurTime),16 进制字符小写。计算 CheckSum 的示例代码请参考 接口鉴权。
onError
参数
| 名称 | 类型 | 说明 |
|---|---|---|
| errObj | Object | 带 errCode 和 errMsg 的 Object 或 XHR 错误对象。 |
返回值
无。
onProgress
参数
| 名称 | 类型 | 说明 |
|---|---|---|
| curFile | Object | 文件对象。 |
返回值
无。
onUploaded
参数
| 名称 | 类型 | 说明 |
|---|---|---|
| curFile | Object | 文件对象。 |
返回值
无。
onAllUploaded
参数
无。
返回值
无。
onAdd
参数
| 名称 | 类型 | 说明 |
|---|---|---|
| curFile | Object | 文件对象 |
返回值
无。
noUploadFn
参数
无。
返回值
无。
existFn
参数
无。
返回值
无。
mismatchFn
参数
无。
返回值
无。
版本更新记录
1.2.0 (2025-01-13)
支持批量上传。
1.1.0 (2023-03-23)
增加文件类型限制。
1.0.0 (2021-07-22)
JavaScript-SDK 初始版本,提供文件上传的基本功能,包括:文件上传、断点续传等。
此文档是否对你有帮助?





