使用微信小程序上传SDK_视频点播(VOD)-阿里云帮助中心

在使用微信小程序上传SDK上传媒体之前，需要先集成相关SDK。本文提供集成及文件上传指引。

上传文件

微信小程序上传文件的基本操作步骤如下：

引入JavaScript脚本。
JavaScript脚本下载，请参见上传SDK。
```
import VODUpload from 'aliyun-upload-sdk-1.0.3.min.js'
```
请求上传地址和凭证或请求STS临时Token，用于上传授权。
微信小程序上传，支持以下两种上传授权方式：
- 部署授权服务获取上传地址和凭证的操作指引请参见获取上传地址和凭证。
- 部署STS服务获取STS临时Token的操作指引请参见获取STS临时Token。
执行结果
使用获取到的上传地址和凭证或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)
        }
    })

开始上传。
1. 调用startUpload()方法开始上传。
```
uploader.startUpload();
```
2. 文件开始上传后，onUploadProgress回调开始同步上传进度。
3. 文件上传成功后，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);

上传文件

队列管理

上传凭证

相关文档