在使用微信小程序上传SDK上传媒体之前,需要先集成相关SDK。本文提供集成及文件上传指引。
上传文件
微信小程序上传文件的基本操作步骤如下:
- 引入JavaScript脚本。
JavaScript脚本下载,请参见小程序上传SDK。
import VODUpload from 'aliyun-upload-sdk-1.0.0.min.js'
- 请求上传地址和凭证或请求STS临时Token,用于上传授权。
- 使用上传凭证或STS临时Token初始化上传实例。
初始化上传实例分为声明初始化回调和初始化上传实例两步。
- 声明
VODUpload
初始化回调。var uploader = new VODUpload({
//阿里云的账号ID,不能为空,您可以使用阿里云账号访问账号中心(https://account.console.aliyun.com/),即可查看账号ID。
userId:"25346073170691****",
//上传到点播的地域,默认值为'cn-shanghai',//eu-central-1,ap-southeast-1,更多信息请参见存储说明
region:"cn-shanghai",
//网络原因失败时,重新上传次数,默认为3
retryCount: 3,
//网络原因失败时,重新上传间隔时间,默认为2秒
retryDuration: 2,
//开始上传
'onUploadstarted': function (uploadInfo) {
},
//文件上传成功
'onUploadSucceed': function (uploadInfo) {
},
//文件上传失败
'onUploadFailed': function (uploadInfo, code, message) {
},
//文件上传进度,单位:字节
'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
},
//上传凭证过期
'onUploadTokenExpired': function (uploadInfo) {
},
//全部文件上传结束
'onUploadEnd':function(uploadInfo){
}
});
- 初始化上传实例。请根据业务需求选择用上传地址和凭证方式或STS方式初始化上传实例。
- 上传地址和凭证方式(推荐)
在上传开始后触发的onUploadStarted
回调中调用setUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress,videoId);
方法进行设置。
说明 当Token超时,会触发onUploadTokenExpired
回调,需要调用resumeUploadWithAuth(uploadAuth)
方法,设置新的上传凭证继续上传。
//开始上传
//uploadInfo 包含要上传的文件信息
// {
// videoId: '', // videoId,由服务端返回的音/视频ID。
// Endpoint: '', // OSS对外服务的访问域名
// Bucket: '', // OSS存储空间
// Object: '' // OSS存储数据的基本单元
// }
'onUploadstarted': function (uploadInfo) {
// 上传方式,需要根据uploadInfo.videoId是否有值(该值由SDK通过localstorage获取),调用视频点播的不同接口获取uploadauth和uploadAddress
// 如果videoId有值,调用刷新视频上传凭证接口,否则调用创建视频上传凭证接口
// 上传过程中,如果在点播控制台删除了视频,即videoId不存在了,则会产生冲突,会出现控制台不存在videoId,而浏览器存在videoId的情况,报InvalidVideo.NotFound错误。此时,需手动清除localstorage
var url = '';
if (uploadInfo.videoId) {
//如果uploadInfo.videoId存在,调用刷新视频上传凭证接口
url = 'refreshUrl'; // 此处 URL 需要替换为服务端AppServer 对应的地址
}
else{
//如果uploadInfo.videoId不存在,调用获取视频上传地址和凭证接口
url = 'createUrl'; // 此处 URL 需要替换为服务端AppServer 对应的地址
}
// 以下请求实现为示例,用于演示设置凭证
// 获取 UploadAuth, UploadAddress, VideoId 可能因 AppServer 实现有差异
fetch(url)
.then((res) => res.json())
.then((data) => {
uploader.setUploadAuthAndAddress(uploadInfo, data.UploadAuth, data.UploadAddress, data.VideoId);
});
},
//上传凭证超时
'onUploadTokenExpired': function (uploadInfo) {
//实现时,根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
//从点播服务刷新的uploadAuth,设置到SDK里
var url = 'refreshUrl'; // 此处URL需要替换为服务端AppServer对应的地址
// 以下请求实现为示例,用于演示设置凭证
// 获取 UploadAuth, UploadAddress, VideoId 可能因 AppServer 实现有差异
fetch(url)
.then((res) => res.json())
.then((data) => {
uploader.resumeUploadWithAuth(data.UploadAuth);
});
},
- STS方式
在上传开始后触发的onUploadStarted
回调中调用setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken);
方法进行设置。
说明 当STS临时Token失效时,会触发onUploadTokenExpired
回调,需要调用resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken);
方法,设置新的STS继续上传。
onUploadstarted: function (uploadInfo) {
// 如果是 STSToken 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
var stsUrl = 'stsUrl';
// 以下请求实现为示例,用于演示设置凭证
// 获取 accessKeyId, accessKeySecret,secretToken 可能因 AppServer 实现有差异
fetch(stsUrl)
.then((res) => res.json())
.then((data) => {
var info = data.SecurityTokenInfo
uploader.setSTSToken(uploadInfo, info.AccessKeyId, info.AccessKeySecret, info.SecretToken);
});
},
onUploadTokenExpired: function (uploadInfo) {
// 如果是上传方式二即根据 STSToken 实现时,从新获取STS临时账号用于恢复上传
// 上传文件过大时可能在上传过程中 sts token 就会失效, 所以需要在 token 过期的回调中调用 resumeUploadWithSTSToken 方法
var stsUrl = 'stsUrl';
// 以下请求实现为示例,用于演示设置凭证
// 获取 accessKeyId, accessKeySecret,secretToken 可能因 AppServer 实现有差异
fetch(stsUrl)
.then((res) => res.json())
.then((data) => {
var info = data.SecurityTokenInfo
uploader.resumeUploadWithSTSToken(info.AccessKeyId, info.AccessKeySecret, info.SecretToken);
});
},
- 根据上传的文件类型(音视频、图片)构造上传参数。
音视频文件参数构造添加音视频文件到上传列表的上传请求函数。
wx.chooseVideo({
success: function (res) {
var file = {url: res.tempFilePath, coverUrl: res.thumbTempFilePath};
var userData = '{"Vod":{}}';
uploader.addFile(file, null, null, null, userData)
}
})
上传时,可以通过paramData
设置自定义音视频信息。paramData
是一个JSON对象字符串,第一级的Vod
必须设置。请在Vod
下面添加paramData
支持的属性。属性支持情况详细信息请参见获取音视频上传地址和凭证。示例如下:
var userData = '{"Vod":{"Title":"test","CateId":"234"}"}';
图片文件参数构造添加图片文件到上传列表的上传请求参数。
wx.chooseImage({
success: function (res) {
var file = {url: res.tempFilePath, coverUrl: res.thumbTempFilePath};
var userData = '{"Vod":{}}';
uploader.addFile(file, null, null, null, userData)
}
})
- 开始上传。
- 调用
startUpload()
方法开始上传。
- 文件开始上传后,
onUploadProgress
回调开始同步上传进度。
- 文件上传成功后,
onUploadSucceed
回调会返回上传结果。
执行结果
- 视频上传成功后会返回videoId作为视频ID,拿到videoId后需要获取播放地址进行播放。更多信息,请参见通过播放凭证播放。
- 图片上传完成后会返回imageUrl,开启URL鉴权后imageUrl会有过期时间。更多信息,请参见URL鉴权。
队列管理
- 删除上传文件
index对应listFiles接口返回列表中元素的索引。
uploader.deleteFile(index);
- 取消单个文件上传
uploader.cancelFile(index);
- 恢复单个文件上传
uploader.resumeFile(index);
- 获取上传文件列表
uploader.listFiles();
- 清理上传文件列表
uploader.cleanList();
上传凭证
- 上传凭证失效后恢复上传
uploader.resumeUploadWithAuth(uploadAuth);
- 设置上传地址和上传凭证
设置上传地址和上传凭证方法在onUploadstarted
回调里调用,此回调的参数包含uploadInfo
的值。
uploader.setUploadAuthAndAddress(uploadInfo,uploadAuth, uploadAddress, videoId);
- 设置STS Token
设置STS Token方法在onUploadstarted
回调里调用,此回调的参数包含uploadInfo
的值。
uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret,secretToken);
- 上传STS Token失效后恢复上传
uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
上传控制
停止上传
uploader.stopUpload();