全部产品
Search
文档中心

视频点播:使用微信小程序上传SDK

更新时间:Jul 15, 2024

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

上传文件

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

  1. 引入JavaScript脚本。

    JavaScript脚本下载,请参见上传SDK

    import VODUpload from 'aliyun-upload-sdk-1.0.3.min.js'
  2. 请求上传地址和凭证请求STS临时Token,用于上传授权。

    微信小程序上传,支持以下两种上传授权方式:

    执行结果

    使用获取到的上传地址和凭证或STS临时Token作为入参初始化上传实例。

  3. 使用上传凭证STS临时Token初始化上传实例。

    初始化上传实例分为声明初始化回调和初始化上传实例两步。

    1. 声明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){
             }
        });
    2. 初始化上传实例。请根据业务需求选择用上传地址和凭证方式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);
          });
        },
  4. 根据上传的文件类型(音视频、图片)构造上传参数。

    音视频文件参数

    构造添加音视频文件到上传列表的上传请求函数。

        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)
            }
        })
  5. 开始上传。

    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);

相关文档

音视频播放

Web播放器