アップロードSDK for WeChat miniプログラムを使用してファイルをアップロードする前に、SDKを統合する必要があります。 このトピックでは、WeChat miniプログラム用のアップロードSDKを統合し、SDKを使用してファイルをアップロードする方法について説明します。

ファイルのアップロード

次の手順を実行して、WeChat miniプログラムのアップロードSDKを使用してファイルをアップロードできます。

  1. JavaScriptコードをインポートします。

    JavaScriptコードのダウンロードリンクの詳細については、「ミニプログラム用アップロードSDKのリリースノート」をご参照ください。 

    'aliyun-upload-sdk-1.0.0.min.js 'からVODUploadをインポートする
  2. アップロードURLとアップロード資格情報またはSecurity Token Service (STS) トークンをアップロード許可用に要求します。

    アップロードSDK for WeChat miniプログラムは、次の2つのアップロード権限付与方法をサポートしています。

  3. アップロードインスタンスを初期化するには、アップロードURLと資格情報またはSTSトークンを使用します。

    初期化プロセスは、次の2つのステップで構成されます。

    1. VODUpload初期化コールバックを宣言します。 
      var uploader = new VODUpload({
       // Alibaba CloudアカウントのID。 このパラメーターは空白のままにできません。 Alibaba CloudアカウントのIDを表示するには、Alibaba Cloudアカウントを使用して [アカウント管理] ページ (https://account.console.aliyun.com/) に移動します。             
       userId:"25346073170691 ****" 、
       // ファイルがアップロードされるリージョンのID。 デフォルト値: cn-shanghai。 eu-central-1やap-southeast-1などの他のリージョンIDの詳細については、「メディアアセットストレージ」をご参照ください。
       リージョン: "cn-shanghai" 、
       // ネットワーク例外時にアップロードを再試行する最大試行回数。 デフォルト値：3
       retryCount: 3、
       // ネットワーク例外時にシステムがアップロードを再試行する間隔。 デフォルト値：2。 (単位：秒)
       retryDuration: 2,
      // アップロードの開始時に呼び出されるコールバック。
      'onUploadstarted': function (uploadInfo) {
      },
      // アップロードが成功した場合に呼び出されるコールバック。
      'onUploadSucceed': function (uploadInfo) {
      },
      // アップロードが失敗した場合に呼び出されるコールバック。
      'onUploadFailed': function (uploadInfo, code, message) {
      },
      // デフォルトまたはカスタムのアップロードの進行状況に達した場合に呼び出されるコールバック。 進捗はバイト単位で測定されます。
      'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
      },
      // Theコールバックである場合呼び出さアップロード資格またはSTSトークンが満了。
      'onUploadTokenExpired': 機能 (uploadInfo) {
      },
      // ファイル全体がアップロードされた場合に呼び出されるコールバック。
      'onUploadEnd': 機能 (uploadInfo){
       }
  });
    2. アップロードインスタンスを初期化します。 アップロードURLと資格情報またはSTSトークンを使用して、必要に応じてアップロードインスタンスを初期化します。
      • アップロードURLと資格情報の使用 (推奨)

        アップロードの開始時に呼び出されるonUploadStartedコールバックのsetUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress,videoId); メソッドを呼び出して、SDKで取得したアップロードURLと資格情報を指定します。

        注 アップロード資格情報の有効期限が切れると、onUploadTokenExpiredコールバックが呼び出されます。 resumeUploadWithAuth(uploadAuth) メソッドを呼び出して、新しいアップロード資格情報を使用してアップロードを再開します。 
        // アップロードの開始時に呼び出されるコールバック。
// uploadInfoオブジェクトは、アップロードするファイルに関する情報を指定します。
// {
// videoId: '', // サーバーによって返されるビデオまたはオーディオID。 
// Endpoint: '', // インターネットからアクセスするためのObject Storage Service (OSS) エンドポイント。
// Bucket: '', // OSSバケット。
// Object: ''// OSSの基本ストレージユニット。
//}
'onUploadstarted': function (uploadInfo) {
  // アップロード方法。 uploadInfo.videoIdパラメーターに値があるかどうかに応じて、アップロードURLと資格情報を取得するには、さまざまなメソッドを呼び出す必要があります。 アップロードSDKは、ローカルストレージからuploadInfo.videoIdパラメーターの値を取得します。
  // uploadInfo.videoIdパラメーターに値がある場合は、RefreshUploadVideo操作を呼び出します。 それ以外の場合は、CreateUploadVideo操作を呼び出します。
  // アップロード中のビデオがApsaraVideo VODコンソールから削除された場合、競合が発生します。 具体的には、ApsaraVideo VODコンソールにはビデオIDが含まれていませんが、ブラウザにはビデオIDが含まれています。 この場合、InvalidVideo.NotFoundエラーメッセージが報告されます。 ローカルストレージをクリアする必要があります。
  var url = '';
  if (uploadInfo.videoId) {
    // uploadInfo.videoIdパラメーターに値がある場合は、RefreshUploadVideo操作を呼び出します。
    url = 'refreshUrl'; // アプリケーションサーバーのエンドポイント。
  }
  else{
    // uploadInfo.videoIdパラメーターに値がない場合は、CreateUploadVideo操作を呼び出します。
    url = 'createUrl'; // アプリケーションサーバーのエンドポイント。
  }

  // 次のサンプルコードは、アップロードSDKでアップロードURLと資格情報を指定する方法を示しています。
  // アップロード資格情報、アップロードURL、およびビデオIDの取得に使用される方法は、アプリケーションサーバーによって異なります。
  fetch(url)
    . then((res) => res.json())
    . then((データ) => {
        uploader.setUploadAuthAndAddress(uploadInfo、data.UploadAuth、data.UploadAddress、data.VideoId);
  });
},

// アップロード資格情報の有効期限が切れた場合に呼び出されるコールバック。
'onUploadTokenExpired': function (uploadInfo) {
  // 実装中に、RefreshUploadVideo操作を呼び出して、uploadInfo.videoIdパラメーターに基づいて新しいアップロード資格情報を取得します。
  // SDKのApsaraVideo VODから取得した新しいアップロード資格情報にuploadAuthパラメーターを設定します。

  var url = 'refreshUrl'; // アプリケーションサーバーのエンドポイント。
  // 次のサンプルコードは、新しいアップロード資格情報を使用してアップロードを再開する方法を示しています。
  // アップロード資格情報、アップロードURL、およびビデオIDの取得に使用される方法は、アプリケーションサーバーによって異なります。
  fetch(url)
    . then((res) => res.json())
    . then((データ) => {
    uploader.resumeUploadWithAuth(data.UploadAuth);
  });
},
      • STSトークンの使用

        アップロードの開始時に呼び出されるonUploadStartedコールバックのsetSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken); メソッドを呼び出して、SDKで取得したSTSトークンを指定します。

        注 STSトークンの有効期限が切れると、onUploadTokenExpiredコールバックが呼び出されます。 resumeUploadWithSTSTSToken (accessKeyId, accessKeySecret, secretToken) メソッドを呼び出して、新しいSTSトークンを使用してアップロードを再開します。 
        onUploadstarted: 関数 (uploadInfo) {
  // STSトークンを使用する場合は、uploader.setUploadAuthAndAddressメソッドを呼び出します。
  var stsUrl = 'stsUrl';
  // 次のサンプルコードは、アップロードSDKでSTSトークンを指定する方法を示しています。
  // AccessKey ID、AccessKey secret、およびSTSトークンの取得に使用されるメソッドは、アプリケーションサーバーによって異なります。
  fetch(stsUrl)
    . then((res) => res.json())
    . then((データ) => {
    var info = data.SecurityTokenInfo
    uploader.setSTSToken(uploadInfo, info.AccessKeyId, info.AccessKeySecret, info.SecretToken);
  });
},

onUploadTokenExpired: 関数 (uploadInfo) {
  // STSトークンの有効期限が切れた場合、アップロードを再開するために新しいSTSトークンを取得する必要があります。
  // アップロードするファイルのサイズが大きい場合、STSトークンはアップロード中に期限切れになることがあります。 この場合、onUploadTokenExpiredコールバックでresumeUploadWithSTSTokenメソッドを呼び出して、新しいSTSトークンを使用してアップロードを再開する必要があります。

  var stsUrl = 'stsUrl';
  // 次のサンプルコードは、新しいSTSトークンを使用してアップロードを再開する方法を示しています。
  // AccessKey ID、AccessKey secret、およびSTSトークンの取得に使用されるメソッドは、アプリケーションサーバーによって異なります。
  fetch(stsUrl)
    . then((res) => res.json())
    . then((データ) => {
    var info = data.SecurityTokenInfo
    uploader. resumeUploadWithSTSTSToken (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 (ファイル、null、null、null、userData)
        }
    })

    アップロード中に、paramDataを使用してオーディオおよびビデオ情報をカスタマイズできます。 paramDataはJSON文字列です。 最初のレイヤーでVodを設定する必要があります。 paramDataがサポートする属性をVod内に追加します。 サポートされる属性の詳細については、「CreateUploadVideo」をご参照ください。 サンプルコード： 

    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 (ファイル、null、null、null、userData)
        }
    })
  5. アップロードを開始します。
    1. startUpload() メソッドを呼び出して、アップロードを開始します。 
      uploader.startUpload();
    2. アップロードが開始したら、onUploadProgressコールバックを呼び出してアップロードの進行状況を同期します。
    3. ファイルがアップロードされている場合は、onUploadSucceedコールバックを呼び出してアップロード結果を返します。
アップロード結果
  • ビデオがアップロードされると、ビデオIDを示すvideoIdパラメータが返されます。 次に、ビデオIDに基づいてストリーミングURLを取得し、ビデオを再生できます。 詳細については、「再生資格情報を使用したビデオの再生」をご参照ください。
  • イメージがアップロードされると、イメージURLを示すimageUrlパラメータが返されます。 URL署名が有効になっている場合、イメージURLは特定の期間後に期限切れになります。 詳細については、「URL認証の設定」をご参照ください。

アップロードリストの管理

  • アップロードするファイルを削除します。

    indexパラメーターは、listFilesメソッドによって返されるリスト内のファイルのインデックスを示します。 

    uploader.deleteFile(index);
  • 1つのファイルのアップロードをキャンセルします。
    uploader.cancelFile(index);
  • 1つのファイルのアップロードを再開します。
    uploader.resumeFile(index);
  • アップロードリストを照会します。
    uploader.listFiles();
  • アップロードリストをクリアします。
    uploader.cleanList();

アップロード資格情報またはSTSトークンの管理

  • アップロード資格情報の有効期限が切れたら、アップロードを再開します。
    uploader.resumeUploadWithAuth(uploadAuth);
  • アップロードURLと資格情報を指定します。

    onUploadstartedコールバックでアップロードURLと資格情報を指定します。 callbackパラメーターはuploadInfoです。 

    uploader.setUploadAuthAndAddress(uploadInfo、uploadAuth、uploadAddress、videoId);
  • STSトークンを指定します。

    onUploadstartedコールバックでSTSトークンを指定します。 callbackパラメーターはuploadInfoです。 

    uploader.setSTSToken(uploadInfo、accessKeyId、accessKeySecret、secretToken);
  • STSトークンの有効期限が切れた後、アップロードを再開します。
    uploader. resumeUploadWithSTSTSToken (accessKeyId、accessKeySecret、secretToken、expireTime);

アップロードの制御

アップロードを停止します。
uploader.stopUpload();