使用微信小程式上傳SDK - ApsaraVideo 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擷取），調用ApsaraVideo for VOD的不同介面擷取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);

ApsaraVideo VOD：使用微信小程式上傳SDK

上傳檔案

隊列管理

上傳憑證

相關文檔