ApsaraVideo 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欄位需要結合ApsaraVideo for VOD支援的點播地區標識填寫。

var uploader = new VODUpload({
  //阿里雲的帳號ID，不可為空，您可以使用阿里雲帳號訪問帳號中心（https://account-console.alibabacloud.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) {},
});

設定憑證

請先瞭解用戶端上傳的整體上傳流程，並根據上傳的授權方式部署對應的授權服務：

1. 選擇使用上傳地址和憑證方式， 請在授權服務中擷取上傳地址和憑證。

2. 選擇使用STS Token方式，請在授權服務中擷取STS Token。

返回的授權資訊統一在onUploadstarted回調裡設定，當憑證失效時會在onUploadTokenExpired回調中響應，需要調用重新整理憑證的方法重新擷取。

// 開始上傳
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.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
uploader.resumeUploadWithAuth(uploadAuth)

 /*回調方法-開始上傳*/
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)

添加檔案

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

開始上傳

uploader.startUpload();

1. 檔案開始上傳後，onUploadProgress回調開始同步上傳進度。

2. 檔案上傳成功後，onUploadSucceed回調會返回上傳結果。

進階功能

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

異常處理

使用微信小程式SDK發生異常時，可藉助錯誤碼快速定位原因，詳細內容請參見用戶端錯誤碼。