全部产品

微信小程序上传

更新时间:2020-03-23 16:09:30

安装

在页面上引入下面的JS脚本,见 视频上传SDK下载

  1. import VODUpload from 'aliyun-upload-sdk-1.0.0.min.js'

整体步骤

  1. 请求上传地址加凭证或STS,相关概念请参见相关文档;
  2. 初始化上传实例,实例化上传有两种方式:上传地址加凭证和STS方式;
  3. 回调设置,所有的上传状态包括进度,上传成功,上传失败,凭证过期都在这里进行处理;
  4. 添加上传文件进入上传列表,目前主要支持视频文件和图片文件的上传;
  5. 启动上传;
  6. 回调处理;

1. 请求上传地址加凭证或STS

1.1 请求上传地址加凭证

上传图片和上传视频获取上传地址和凭证所请求的API是不同的。客户端上传视频:需要请求向AppServer发送请求,AppServer通过OpenApi向阿里云点播服务发送CreateUploadVideo请求。请求成功将返回上传地址,上传凭证以及VideoId,AppServer需要将结果返回给客户端。客户端上传图片:需要请求向AppServer发送请求,AppServer通过OpenApi向阿里云点播服务发送CreateUploadImage请求。请求成功将返回上传地址,上传凭证以及ImageURL,AppServer需要将结果返回给客户端。

1.2 请求STS

通过STS方式,客户端需要向AppServer发送请求,AppServer向阿里云STS服务请求临时STS凭证。请求成功将返回STS凭证,AppServer需要将结果返回给客户端。

基本流程

upload-by-STS

2. 初始化

首先,我们需要声明一个VODUpload初始化回调

  1. var uploader = new VODUpload({
  2. //阿里账号ID,必须有值 ,值的来源https://help.aliyun.com/knowledge_detail/37196.html
  3. userId:"0",
  4. //上传到点播的地域, 默认值为'cn-shanghai',//eu-central-1,ap-southeast-1
  5. region:"",
  6. //网络原因失败时,重新上传次数,默认为3
  7. retryCount: 3,
  8. //网络原因失败时,重新上传间隔时间,默认为2秒
  9. retryDuration: 2,
  10. // 开始上传
  11. 'onUploadstarted': function (uploadInfo) {
  12. },
  13. // 文件上传成功
  14. 'onUploadSucceed': function (uploadInfo) {
  15. },
  16. // 文件上传失败
  17. 'onUploadFailed': function (uploadInfo, code, message) {
  18. },
  19. // 文件上传进度,单位:字节
  20. 'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
  21. },
  22. // 上传凭证超时
  23. 'onUploadTokenExpired': function (uploadInfo) {
  24. },
  25. //全部文件上传结束
  26. 'onUploadEnd':function(uploadInfo){
  27. }
  28. });

2.1 上传地址和凭证方式(推荐使用)

基本流程

client upload

第一步请求获取的上传地址和凭证初始化时无需设置,而是在开始上传开始后触发的onUploadStarted回调中调用setUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress,videoId);方法进行设置。当token超时,会触发onUploadTokenExpired回调,需要调用resumeUploadWithAuth(uploadAuth)方法,设置新的上传凭证继续上传。

示例代码

  1. var uploader = new VODUpload({
  2. //阿里账号ID,必须有值 ,值的来源https://help.aliyun.com/knowledge_detail/37196.html
  3. userId:"0",
  4. //网络原因失败时,重新上传次数,默认为3
  5. retryCount: 3,
  6. //网络原因失败时,重新上传间隔时间,默认为2秒
  7. retryDuration: 2,
  8. // 开始上传
  9. 'onUploadstarted': function (uploadInfo) {
  10. log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
  11. //上传方式1, 需要根据uploadInfo.videoId是否有值,调用点播的不同接口获取uploadauth和uploadAddress,如果videoId有值,调用刷新视频上传凭证接口,否则调用创建视频上传凭证接口
  12. if (uploadInfo.videoId) {
  13. // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
  14. }
  15. else{
  16. // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
  17. }
  18. //从点播服务获取的uploadAuth、uploadAddress和videoId,设置到SDK里
  19. uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
  20. },
  21. // 文件上传成功
  22. 'onUploadSucceed': function (uploadInfo) {
  23. log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
  24. },
  25. // 文件上传失败
  26. 'onUploadFailed': function (uploadInfo, code, message) {
  27. log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
  28. },
  29. // 文件上传进度,单位:字节
  30. 'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
  31. log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(loadedPercent * 100) + "%");
  32. },
  33. // 上传凭证超时
  34. 'onUploadTokenExpired': function (uploadInfo) {
  35. console.log("onUploadTokenExpired");
  36. //实现时,根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
  37. //https://help.aliyun.com/document_detail/55408.html
  38. //从点播服务刷新的uploadAuth,设置到SDK里
  39. uploader.resumeUploadWithAuth(uploadAuth);
  40. },
  41. //全部文件上传结束
  42. 'onUploadEnd':function(uploadInfo){
  43. console.log("onUploadEnd: uploaded all the files");
  44. }
  45. });

2.2 STS方式

第一步请求获取的STS初始化时无需设置,而是在开始上传开始后触发的onUploadStarted回调中调用setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken);方法进行设置。当token超时,会触发onUploadTokenExpired回调,需要调用resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken)方法,设置新的Token继续上传。

  1. var uploader = new VODUpload({
  2. //网络原因失败时,重新上传次数,默认为3
  3. retryCount: 3,
  4. //网络原因失败时,重新上传间隔时间,默认为2秒
  5. retryDuration: 2,
  6. // 开始上传
  7. 'onUploadstarted': function (uploadInfo) {
  8. log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
  9. //获取STS Token,设置到SDK
  10. uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken);
  11. }
  12. // 文件上传成功
  13. 'onUploadSucceed': function (uploadInfo) {
  14. log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
  15. },
  16. // 文件上传失败
  17. 'onUploadFailed': function (uploadInfo, code, message) {
  18. log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
  19. },
  20. // 文件上传进度,单位:字节
  21. 'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
  22. log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(loadedPercent * 100) + "%");
  23. },
  24. // 上传凭证超时
  25. 'onUploadTokenExpired': function (uploadInfo) {
  26. console.log("onUploadTokenExpired");
  27. //重新获取STS token,恢复上传
  28. uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken);
  29. },
  30. //全部文件上传结束
  31. 'onUploadEnd':function(uploadInfo){
  32. console.log("onUploadEnd: uploaded all the files");
  33. }
  34. });

3 列表管理

3.1 添加上传文件

需要使用 wx.chooseImage、wx.chooseVideo 让用户选择文件。获取到用户选择的文件后,添加到上传列表中。

  1. ``` javascript
  2. wx.chooseVideo({
  3. success: function (res) {
  4. var file = {url: res.tempFilePath, coverUrl: res.thumbTempFilePath};
  5. var userData = '{"Vod":{}}';
  6. uploader.addFile(file, null, null, null, userData)
  7. }
  8. })
  9. ```

上传时,可以选择是否启用水印和优先级,userData是一个json对象字符串。第一级的Vod是必须的,Vod下面添加属性,userData支持的属性参考点播服务的createUploadVideo,接口示例如下:

  1. ``` javascript
  2. var userData = '{"Vod":{"Title":"test","CateId":"234"}"}';
  3. ```

3.2 删除上传文件

index,对应listFiles接口返回列表中元素的索引。

  1. ```
  2. uploader.deleteFile(index);
  3. ```

3.3 取消单个文件上传

  1. ```
  2. uploader.cancelFile(index);
  3. ```

3.4 恢复单个文件上传

  1. ```
  2. uploader.resumeFile(index);
  3. ```

3.5 获取上传文件列表

  1. ```
  2. uploader.listFiles();
  3. ```

3.6 清理上传文件列表

  1. ```
  2. uploader.cleanList();
  3. ```

4 上传控制

4.1 开始上传

  1. ```
  2. uploader.startUpload();
  3. ```

4.2 停止上传

  1. ```
  2. uploader.stopUpload();
  3. ```

4.3 上传凭证失效后恢复上传

  1. ```
  2. uploader.resumeUploadWithAuth(uploadAuth);
  3. ```

4.4 设置上传地址和上传凭证

  1. 设置上传地址和上传凭证方法在onUploadstarted回调里调用,此回调的参数包含uploadInfo的值。
  2. ```
  3. uploader.setUploadAuthAndAddress(uploadInfo,uploadAuth, uploadAddress, videoId);
  4. ```
  5. >注:获取上传凭证和上传地址,请查看[相关文档](~~52227~~)

4.5 设置STS Token

  1. 设置STS Token方法在onUploadstarted回调里调用,此回调的参数包含uploadInfo的值。
  2. ```
  3. uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret,secretToken);
  4. ```

4.6 上传STS Token失效后恢复上传

  1. ```
  2. uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
  3. ```