上傳文件

微信小程序上傳文件的基本操作步驟如下：

1. 引入JavaScript腳本。

   JavaScript腳本下載，請參見上傳SDK。

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

2. 請求上傳地址和憑證或請求STS臨時Token，用于上傳授權。

   微信小程序上傳，支持以下兩種上傳授權方式：

   • 部署授權服務獲取上傳地址和憑證的操作指引請參見獲取上傳地址和憑證。
   • 部署STS服務獲取STS臨時Token的操作指引請參見獲取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播放器