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

本文介绍如何在微信小程序中使用SDK将媒体文件从本地上传至点播存储。

功能说明

微信小程序SDK仅支持上传音/视频、图片，不支持上传辅助媒资。

SDK及Demo下载地址

SDK版本：1.0.3
更新时间：2024-07-15
下载包MD5值：5145518e0bbb410c156b37c04c447a6f
下载地址：微信小程序上传SDK及示例代码

集成方式

将sdk文件复制到您的项目中，并在对应页面引入依赖。

import VODUpload from 'aliyun-upload-sdk-1.0.3.min.js'

基础设置

初始化上传实例

初始化SDK实例时必须传入userId用于标识上传者的身份，必填，有值即可，可以是阿里云账号ID或者您自定义的用户ID，您可以访问阿里云账号中心查看账号ID。如果没有传userId或传值为空则会报错。
region字段需要结合视频点播支持的点播地域标识填写。

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 Token方式，请在授权服务中获取STS Token。

返回的授权信息统一在onUploadstarted回调里设置，当凭证失效时会在onUploadTokenExpired回调中响应，需要调用刷新凭证的方法重新获取。

上传地址和凭证方式

设置上传地址和凭证需要调用setUploadAuthAndAddress，当凭证过期，会触发onUploadTokenExpired回调，需要调用resumeUploadWithAuth方法，设置新的凭证继续上传。

// 开始上传
onUploadstarted: function (uploadInfo) {
    console.log('文件开始上传...');
    console.log("onUploadStarted:" + JSON.stringify(uploadInfo))

    var url = "https://alivc-demo.aliyuncs.com/demo/getVideoUploadAuth?title=" + uploadInfo.url + "&fileName=" + uploadInfo.url + "&fileSize=" + uploadInfo.fileSize + "&description=description&coverURL=" + uploadInfo.coverUrl + "&tags=tags";

    wx.request({
        'url': url,
        success: (res => {
            if (res.statusCode === 200) {
                var akInfo = res.data.data;
                uploader.setUploadAuthAndAddress(uploadInfo, akInfo.uploadAuth, akInfo.uploadAddress, akInfo.imageId);
            } else {
                console.log(res)
                uploader.stopUpload();
            }
        }),
        fail: (res => {
            uploader.stopUpload();
            console.log(res)
        })
    });

},
// 上传凭证超时
onUploadTokenExpired: function (uploadInfo) {
    const url = "https://alivc-demo.aliyuncs.com/demo/refreshVideoUploadAuth?videoId=" + uploadInfo.videoId;
    
    wx.request({
      'url': url,
      success: (res => {
          if (res.statusCode === 200) {
              var akInfo = res.data.data;
              uploader.resumeUploadWithAuth(akInfo.uploadAuth);
          } else {
              console.log(res)
              uploader.stopUpload();
          }
      }),
      fail: (res => {
          uploader.stopUpload();
          console.log(res)
    })
  });
},

方法说明：

uploader.sertUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
uploader.resumeUploadWithAuth(uploadAuth)

参数名称	参数描述
uploadInfo	将onUploadstarted回调中的第一个参数进行透传。
uploadAuth	CreateUploadVideo接口返回的上传凭证。
uploadAddress	CreateUploadVideo接口返回的上传地址。
videoId	CreateUploadVideo接口返回的音/视频 ID.

STS Token方式

设置STS Token需要调用setSTSToken，当STS Token失效时，会触发onUploadTokenExpired回调，需要调用resumeUploadWithSTSToken方法，设置新的STS Token继续上传。

 /*回调方法-开始上传*/
onUploadstarted: function (uploadInfo) {
    console.log('文件开始上传...');
    console.log("onUploadStarted:" + JSON.stringify(uploadInfo))
    wx.request({
        url: "https://alivc-demo.aliyuncs.com/demo/getSts",
        // data: data,
        // header: header,
        // method: method,
        success: (res => {
            if (res.statusCode === 200) {
                var akInfo = res.data.data;
                uploader.setSTSToken(uploadInfo, akInfo.accessKeyId, akInfo.accessKeySecret, akInfo.securityToken);
            } else {
                console.log(res)
            }
        }),
        fail: (res => {
            onError(res);
        })
    });

},
// 上传凭证超时
onUploadTokenExpired: function (uploadInfo) {
    const url = "https://alivc-demo.aliyuncs.com/demo/getSts";
    
    wx.request({
      'url': url,
      success: (res => {
          if (res.statusCode === 200) {
              var akInfo = res.data.data;
              uploader.resumeUploadWithSTSToken(akInfo.uploadAuth);
          } else {
              console.log(res)
              uploader.stopUpload();
          }
      }),
      fail: (res => {
          uploader.stopUpload();
          console.log(res)
    })
  });
},

方法说明：

uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken)
uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken)

参数名称	参数描述
uploadInfo	将onUploadstarted回调中的第一个参数进行透传。
accessKeyId	STS Token中的`AccessKeyId`字段。
accessKeySecret	STS Token中的`AccessKeySecret`字段。
secretToken	STS Token中的`SecretToken`字段。

添加文件

<view class="weui-uploader__input-box">
  <view class="weui-uploader__input" bindtap="chooseVideo"></view>
</view>

// 选择视频
chooseVideo: function (e) {
    var that = this;
    wx.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        compressed: false,
        camera: 'back',
        success: function (res) {
            var file = {url: res.tempFilePath, coverUrl: res.thumbTempFilePath};
            var uploader = that.data.uploader;
            var paramData = '{"Vod":{}}';
            uploader.addFile(file, null, null, null, paramData);
        }
    })
},

方法说明：

uploader.addFile(file，endpoint，bucket，object，paramData)

参数名称	是否必填	类型	参数描述
file	是	File	需要上传的音视频文件。
endpoint	否	String	想要上传到的endpoint，传入null则由服务端决定。
bucket	否	String	想要上传到的bucket，传入null则由服务端决定。
object	否	String	想要上传到的object，传入null则由服务端决定。
paramData	否	String	当您使用STS方式上传时，可以通过`paramData`设置音视频或图片的标题、描述等信息，以及设置对音视频的转码、回调等。 `paramData`是一个JSON对象字符串，如 `'{"Vod":{}}'`。第一级的`Vod`是必须的，通过在`Vod`下添加属性实现。支持设置的属性为CreateUploadVideo - 获取音视频上传地址和凭证或CreateUploadImage - 获取图片上传地址和凭证接口的入参。

开始上传

uploader.startUpload();

文件开始上传后，onUploadProgress回调开始同步上传进度。
文件上传成功后，onUploadSucceed回调会返回上传结果。

高级功能

上传加速

当您需要上传较大文件（GB、TB级别）或进行跨区域上传（比如在中国内地将视频上传到新加坡存储地域的存储地址）时，您可以启用上传加速功能。

开通上传加速功能需提交工单，您需要提供阿里云账号UID和需要使用上传加速的存储地址。

上传地址和凭证方式

如果您采用上传地址和凭证方式上传，请在CreateUploadVideo - 获取音视频上传地址和凭证接口的自定义参数UserData中增加相应的key-value值，以设置加速配置。示例如下：

UserData={
  "AccelerateConfig": {
    "Type": "oss",
    "Domain": "https://oss-accelerate.aliyuncs.com"
  }
}

STS Token方式

如果您采用STS Token方式进行文件上传，您需要在调用addFile方法时，在参数paramData中增加UserData属性，并配置上传内容。示例如下：

uploader.addFile(file,null,null,null,'{"Vod":{"UserData":{"AccelerateConfig":{"Type":"oss","Domain":"https://oss-accelerate.aliyuncs.com"}}}}');

UserData参数说明

名称	类型	必填	描述
userData	string	否	自定义设置。为 JSON 字符串，支持消息回调、上传加速等设置。更多信息，请参见。

加速配置参数说明：

名称	类型	说明
Type	string	开启上传加速的类型（仅支持oss）。
Domain	string	用户bucket的加速地址（默认为https）。说明使用开通后分配的一个加速地址，例如：vod-*******.oss-accelerate.aliyuncs.com。

更多关于UserData设置请参考请求参数说明。

停止上传

说明

stopUpload要确保文件正在上传，有文件上传进度时才能工作。

uploader.stopUpload();

队列管理

对于上传中或者上传完成的文件，可以通过对应的API进行管理。支持的API如下：

获取上传文件列表
返回值为通过addFile添加的文件信息列表。其中的file属性为对应的File类型的文件，可以通过遍历获取到需要操作的文件的index。
```
var list = uploader.listFiles();
for (var i=0; i<list.length; i++) {
    console.log("file:" + list[i].file.name);
}
```

删除上传文件

uploader.deleteFile(index);//需要删除的文件index，对应listFiles接口返回列表中元素的索引

取消单个文件上传
说明
- cancelFile成功后会在控制台打印oss is cancel as error。这是SDK为了避免已上传的部分分片文件占用存储空间（如果占用就会产生存储费用）做的处理。
- 取消文件上传后，如果后续还需要继续上传该文件，则需要先使用uploader.resumeFile(index);恢复该文件后，再进行上传。
```
uploader.cancelFile(index);
```
恢复单个文件上传
```
uploader.resumeFile(index);
```
清理上传文件列表
```
uploader.cleanList();
```

异常处理

使用微信小程序SDK发生异常时，可借助错误码快速定位原因，详细内容请参见客户端错误码。