Upload SDK for WeChat Mini Program

Usage notes

The WeChat mini program SDK supports uploading audio, video, and image files. It does not support uploading auxiliary media assets.

Download SDK and demo

• SDK version: 1.0.3

• Update time: 2024-07-15

• Package MD5 hash: 5145518e0bbb410c156b37c04c447a6f

• Download address: WeChat mini program upload SDK and sample code

Integration SDK

Copy the SDK file to your project and import the dependency on the relevant page.

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

Basic settings

Initialize the upload instance

• When you initialize the SDK instance, you must pass the userId parameter to identify the uploader. This parameter is required and cannot be empty. You can use your Alibaba Cloud account ID or a custom user ID. To view your account ID, go to the Account Center. If you do not pass the userId parameter or if you pass an empty value, an error is reported.

• The region field must be set to one of the region IDs supported by ApsaraVideo VOD.

var uploader = new VODUpload({
  // The ID of your Alibaba Cloud account. This parameter cannot be empty. To view your account ID, go to the Account Center.
  userId: "25346073170691****",
  // The region where you want to upload files to ApsaraVideo VOD. Default value: 'cn-shanghai'. Other valid values include 'eu-central-1' and 'ap-southeast-1'. For more information, see Overview.
  region: "cn-shanghai",
  // The number of retries when an upload fails due to network issues. Default value: 3.
  retryCount: 3,
  // The interval between retries when an upload fails due to network issues. Default value: 2 seconds.
  retryDuration: 2,
  // The upload starts.
  onUploadstarted: function (uploadInfo) {},
  // The file is uploaded.
  onUploadSucceed: function (uploadInfo) {},
  // The file fails to be uploaded.
  onUploadFailed: function (uploadInfo, code, message) {},
  // The upload progress. Unit: bytes.
  onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {},
  // The upload credential expires.
  onUploadTokenExpired: function (uploadInfo) {},
  // All files are uploaded.
  onUploadEnd: function (uploadInfo) {},
});

Set credentials

Review the overall client-side upload process and deploy the authorization service for your preferred method.

1. If you use the upload URL and credential method, you must obtain the upload URL and credential from the authorization service.

2. If you use the Security Token Service (STS) token method, you must obtain an STS token from the authorization service.

Set all authorization information in the onUploadstarted callback. When credentials expire, the onUploadTokenExpired callback is triggered. Call the appropriate method in this callback to refresh the credentials.

// The upload starts.
onUploadstarted: function (uploadInfo) {
    console.log('Starting file upload...');
    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)
        })
    });

},
// The upload credential expires.
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.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
uploader.resumeUploadWithAuth(uploadAuth)

 /* Callback method - The upload starts. */
onUploadstarted: function (uploadInfo) {
    console.log('Starting file upload...');
    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);
        })
    });

},
// The upload credential expires.
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)

Add files

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

// Select a video
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);
        }
    })
},

Method description:

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

Start the upload

uploader.startUpload();

1. After the file upload is started, the onUploadProgress callback is invoked to synchronize the upload progress.

2. If the file upload is successful, the onUploadSucceed callback is invoked to return the upload result.

Advanced features

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

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

uploader.stopUpload();

Troubleshooting

If an error occurs when you use the WeChat mini program SDK, identify the cause based on the error code. For more information, see Error codes.