快速开始
快速开始
引入SDK
import { VodUpload } from 'baiduvoduploadsdk'
import {UploaderInfo,UploadStatus,UploadUrlResParams,uploadCompleteResParams} from 'baiduvoduploadsdk'
创建实例
this.uploader = new VodUpload({
chunkParallelLimit: 5,
getUploadUrl: (params) => {
return axios.post(this.getUploadServeUrl, params).then((response:ESObject)=>{
let urls:string[] = [];
let sessionKey:string = "";
if(response.data && response.data.urls){
urls = response.data.urls
}
if(response.data && response.data.sessionKey){
sessionKey = response.data.sessionKey
}
return {urls,sessionKey} as UploadUrlResParams
}) .catch((error:Error) => {
let urls:string[] = [];
let sessionKey:string = "";
return {urls,sessionKey} as UploadUrlResParams
});
},
uploadComplete: (params: ESObject) => {
return axios.post(this.uploadDoneUrl, params).then((response:ESObject)=>{
let mediaId:string = "";
if(response && response.data.mediaId){
mediaId = response.data.mediaId;
};
return {mediaId} as uploadCompleteResParams
});
}
});
SDK在上传时与使用方的交互有两步,具体如下:
步骤1:申请上传
SDK会上传前会通过getUploadUrl回调函数获取上传链接及临时sessionKey,函数定义如下:
function getUploadUrl(params){return axios.post(url, params).then(res=> res.data);}
步骤2:确认上传
当文件上传完成后,需要通过uploadComplete回调函数告知VOD服务文件已经上传完成,函数定义如下:
function uploadComplete(params){return axios.post(url, params).then(res=> res.data);}
说明:
1、参数params为调用VOD后端服务时所需要的数据,直接传给接口即可,具体格式见下方。
2、url为请求VOD服务时的接口地址,具体请参考API文档。
3、需要return接口返回的数据。
高级功能
上传多个文件
当需要上传多个文件时,可循环调用upload方法
import { VodUpload } from 'baiduvoduploadsdk'
import {UploaderInfo,UploadStatus,UploadUrlResParams,uploadCompleteResParams} from 'baiduvoduploadsdk'
const uploader = new VodUpload({
fileParallelLimit: 5, // 并行上传5个文件
getUploadUrl: getUploadUrl, // 申请上传函数
uploadComplete: uploadComplete // 确认上传函数
});
mediaFilesUrl.forEach(function (url) {
uploader.upload({
fileUrl: url // 待上传的媒体文件路径
});
});
uploader.on('process', function(info, infos) {
console.log('文件名:', info.name, ',上传进度:', info.percent);
});
uploader.done().then(function(infos) {
console.log('全部上传完成', infos);
});
说明:
1、在实例化VodUpload时,可以通过 fileParallelLimit 配置项控制并行上传的文件数量,默认并行上传3个文件。
2、mediaFilesUrl 是待上传的文件路径,类型为Array。
3、on事件回调函数有两个参数,第一个参数为执行此回调事件的文件信息,第二个参数为所有上传文件的信息。
暂停上传
SDK支持通过stop()方法,暂停正在上传的文件
uploader.stop(ids:string[])
说明:
1、stop函数支持传入文件id数组来制定暂停某个文件,如果为空时会暂停所有上传的文件,下方cancel、resume方法有同样的逻辑
取消上传
SDK支持通过cancel()方法,取消正在上传的文件
uploader.cancel(ids:string[])
恢复上传
已经暂停的文件,可以通过resume()方法恢复上传
uploader.resume(ids:string[])
断点续传
断点续传功能的前提是需要分片上传,SDK 默认开启了分片上传和断点续传功能,无需额外操作。但断点续传功能仅限于为退出app,如果退出app则信息将会被清除。
应用场景:上传文件暂停后,如果恢复上传可以从可以从中断处继续上传,减少重复上传时
接口描述
VodUpload 初始化参数
VodUpload构造函数支持传入配置项,具体配置如下
参数 | 必填 | 类型 | 默认值 | 说明 |
---|---|---|---|---|
getUploadUrl | 是 | function(params: GetUploadUrlParams): Promise<{sessionKey: string; urls: string[]}> | - | 申请上传回调,获取上传链接 |
uploadComplete | 是 | function(params: UploadCompleteParams): Promise<{mediaId: string}> | - | 确认上传回调 |
autoExtractCover | 否 | boolean | false | 是否自动提取封面 |
isMultipartUpload | 否 | boolean | true | 是否分片上传 |
enableResume | 否 | boolean | true | 是否支持断点续传 |
fileParallelLimit | 否 | number | 3 | 同一个实例下,上传的文件并发数 |
chunkSize | 否 | number | 16 * 1024 ** 2 | 分片上传时,每个分片的大小 |
chunkParallelLimit | 否 | number | 6 | 同一个上传文件进行分片上传时的并发数 |
chunkRetryTimes | chunkRetryTimes | number | 2 | 分片上传时,出错重试次数 |
GetUploadUrlParams
参数 | 类型 | 说明 |
---|---|---|
name | string | 文件名称 |
container | string | 音视频封装格式 |
isMultipartUpload | boolean | 是否需要分片上传 |
numParts | number | 分片数 |
UploadCompleteParams
参数 | 类型 | 说明 |
---|---|---|
sessionKey | string | 临时上传 key |
isMultipartUpload | boolean | 是否需要分片上传 |
etags | string[] | 分片文件的版本标识 |
autoExtractCover | boolean | 自动提取封面图 |
VodUpload API
方法名 | 类型 | 说明 |
---|---|---|
infos | UploaderInfo[] | 上传文件的信息 |
upload | function(params: UploadParams): UploaderInfo | 上传文件 |
stop | function(ids?: string[]): void | 停止上传 |
resume | function(ids?: string[]): void | 恢复上传 |
retry | function(ids?: string[]): void | 重试上传 |
cancel | function(ids?: string[]): void | 取消上传 |
remove | function(ids?: string[]): void | 清除上传记录 |
done | function(): Promise<UploaderInfo[]> | 上传完成 |
on | function(event: string, callback: (info: UploaderInfo) => void): void | 绑定事件,可以监听某个事件 |
off | function(event: string, callback: (info: UploaderInfo) => void): void | 解除绑定事件 |
onEvent | function(callback: function(event: string, info: UploaderInfo, infos: UploaderInfo[]): void): void | 统一绑定所有事件,所有事件变化均会调用该事件 |
offEvent | function(callback: function(event: string, info: UploaderInfo, infos: UploaderInfo[]): void): void | 解除统一绑定事件 |
UploadParams
参数 | 必填 | 类型 | 默认值 | 说明 |
---|---|---|---|---|
fileUrl | 是 | string | - | 上传的文件路径 |
name | 否 | string | file.name |
文件名称,默认使用 file.name |
autoExtractCover | 否 | boolean | false |
是否自动提取封面 |
isMultipartUpload | 否 | boolean | true |
是否分片上传 |
enableResume | 否 | boolean | true |
是否支持断点续传 |
chunkSize | 否 | number | 16 * 1024 ** 2 |
分片上传时,每个分片的大小 |
chunkParallelLimit | 否 | number | 6 |
同一个上传文件进行分片上传时的并发数 |
chunkRetryTimes | 否 | number | 2 |
分片上传时,出错重试次数 |
UploaderInfo
参数 | 类型 | 说明 |
---|---|---|
id | string | 文件上传 id |
name | string | 文件名 |
size | string | 文件大小 |
fileType | string | 文件类型 |
suffixName | string | 文件后缀名 |
status | string | 上传状态 |
percent | number | 文件上传进度百分比, 范围:[0, 100] |
errMsg | string | 上传失败的错误信息 |
mediaId | string | 服务端保存的媒资 Id,当上传完成后才有值 |
上传事件
事件 | 描述 |
---|---|
ready | 已就绪 |
process | 上传中 |
success | 上传成功 |
error | 上传失败 |
stop | 暂停上传 |
cancel | 取消上传 |
可以通过on()方法进行事件监听,如:
const uploader = new VodUpload({
getUploadUrl: getUploadUrl, // 上文所述申请上传函数
uploadComplete: uploadComplete // 上文所述确认上传函数
});
uploader.upload({
fileUrl: fileUrl // 待上传的媒体文件路径
});
uploader.on('process', function(info) {
console.log('上传进度', info.percent);
});
uploader.on('csuccess', function(info) {
console.log('上传成功', info.status);
});