:Upload SDK for JavaScript

前提条件

• アップロードするファイルは、標準のHTML入力タイプを使用して選択されます。 The size of the file to be uploaded does not exceed 10 GB. If the file size exceeds 10 GB, use the resumable upload feature. 詳細については、「高度な機能」をご参照ください。
• The upload SDK for JavaScript is used in one of the following browsers:
  • Internet Explorer 10以降
  • Edge
  • Google Chrome, Firefox, or Safari of mainstream versions
  • Default browsers that are used by Android, iOS, or Windows Phone systems of mainstream versions

ファイルのアップロード

次の手順を実行して、アップロードSDK for JavaScriptを使用してファイルをアップロードします。

1. JavaScript用のアップロードSDKのインポート
   For more information about how to download JavaScript scripts, see SDK download. アップロードSDKは、モジュラー読み込みを完全にサポートしていません。 If you reference a file by using the import or require method, the error ReferenceError: OSS is not defined is returned. 代わりに、ビジネスニーズに基づいて次のいずれかの参照方法を使用できます。

   • HTMLでスクリプトを使用した参照。 (推奨)

     <!-- es6-promiseファイルはInternet Explorerに必要です。 Internet Explorer 10 and later are supported. -->
       <script src="../lib/es6-promise.min.js"></script>
       <script src="../lib/aliyun-oss-sdk6.17.1.min.js"></script>
       <script src="../aliyun-vod-upload-sdk1.5.2.min.js"></script>

   • モジュールを使用した参照。
     You can manually assign the content in Object Storage Service (OSS) modules to Window. 以下のコードを例として使用します。

     注 HTMLのスクリプトを使用してモジュールを参照する場合は、手動でモジュールを再参照する必要はありません。

     '../lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.17.1.min' からOSSをインポートする
     window.OSS = OSS;
     インポート '../lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.2.min'

2. アップロードURLとアップロード資格情報またはSecurity Token Service (STS) トークンをアップロード許可用に要求します。

   アップロードSDK for JavaScriptを使用してファイルをアップロードする場合、プロセスは2つのステップに分けられます。AppServerからのアップロード資格情報の取得とOSSサーバーへのファイルのアップロードです。 後者はAlibaba Cloudによって実装されています。 AppServerからアップロード資格情報を取得し、アップロードSDK for JavaScriptのアップロード資格情報を指定するだけです。 次のいずれかの方法を使用して、アップロード資格情報を取得できます。

3. アップロード資格情報またはSTSトークンを使用して、アップロードインスタンスを開始します。 アップロード資格情報の使用を推奨します。

   この初期化プロセスは、初期化コールバックの宣言とアップロードインスタンスの初期化の2つのステップに分けられます。

   1. 初期化コールバックを宣言します。
      AliyunUpload.Vod初期化コールバックを宣言します。 次のサンプルコードでは、指定できる設定について説明します。

      var uploader = new AliyunUpload.Vod({
             // 必須です。 アカウントの ID です。 You can log on to the Alibaba Cloud console and go to the Account Management page (https://account.console.aliyun.com/) to view your account ID.
             userId:"122" 、
           // The region to which you want to upload the file. デフォルト値: cn-shanghai。 
           // eu-central-1、ap-southeast-1
           region:"",
             // The size of each part in multipart upload. 単位: バイト。 デフォルトのサイズは1 MB (1024 × 1024) です。 サイズは100 KB (100 × 1024) より小さくすることはできません。
             partSize: 1048576、
           // 並行してアップロードできるパーツの最大数。 デフォルト値: 5 です。
             パラレル: 5,
           // The maximum number of attempts to retry the upload upon a network exception. デフォルト値：3
           retryCount: 3,
           // ネットワーク例外時にシステムがアップロードを再試行する間隔。 デフォルト値：2。 (単位：秒)
           retryDuration: 2,
            // このコールバックは、アップロードの開始時に発生します。
            'onUploadstarted': function (uploadInfo) {
            },
            // This callback is fired when the upload succeeds.
            'onUploadSucceed': function (uploadInfo) {
            },
            // This callback is fired when the upload fails.
            'onUploadFailed': function (uploadInfo, code, message) {
            },
            // このコールバックは、デフォルトまたはカスタムのアップロードの進行状況に達すると発生します。 The progress is measured in bytes.
            'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
            },
            // このコールバックは、アップロード資格情報またはSTSトークンの有効期限が切れると発生します。
            'onUploadTokenExpired': function (uploadInfo) {
            },
          // このコールバックは、すべてのファイルがアップロードされると発生します。
          'onUploadEnd': 関数 (uploadInfo){
             }
        });

   2. アップロードインスタンスを初期化します。 アップロードURLとアップロード資格情報またはSTSトークンを使用して、ビジネス要件に基づいてアップロードインスタンスを初期化します。

      In the onUploadstarted callback, obtain an upload credential or refresh the upload credential. 必要に応じてアップロードインスタンスを初期化する方法を選択します。

      • アップロードURLとアップロード資格情報の使用 (推奨)

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

        重要 アップロード資格情報 (UploadAuth) の有効期限が切れると、onUploadTokenExpiredコールバックが発生します。 resumeUploadWithAuth(uploadAuth) メソッドを呼び出して、新しいアップロード資格情報を使用してアップロードを再開します。

        // Start the upload.
        // The UploadInfo parameter contains the following information about the file to be uploaded:
        // {
        //   videoId: '', // The ID of the video or audio file. The ID is returned by the AppServer. 
        // Endpoint: '', // OSSへのアクセスに使用されるドメイン名。
        // Bucket: '', // OSSバケット。
        // Object: ''// An object is the basic unit for data operations in OSS.
        // }
        'onUploadstarted': function (uploadInfo) {
          // アップロード方法。 ApsaraVideo VODのさまざまな操作を呼び出して、uploadInfo.videoIdパラメーターが空かどうかに基づいてuploadauthパラメーターとuploadAddressパラメーターの値を取得できます。 SDKは、localstorageからuploadInfo.videoIdパラメーターの値を取得します。
          // videoIdパラメーターに値がある場合は、RefreshUploadVideo操作を呼び出します。 それ以外の場合は、CreateUploadVideo操作を呼び出します。
          // アップロード中にApsaraVideo VODコンソールでビデオまたはオーディオファイルを削除した場合、ビデオIDはコンソールには存在せず、ブラウザには存在します。 この場合、エラーInvalidVideo.NotFoundが返されます。 You must manually clear localstorage.
          var url = '';
          if (uploadInfo.videoId) {
            // uploadInfo.videoIdパラメーターに値がある場合は、RefreshUploadVideo操作を呼び出します。
            url = 'refreshUrl'; // Specify the endpoint that is used to access the AppServer.
          }
          else{
            // uploadInfo.videoIdパラメーターに値がない場合は、CreateUploadVideo操作を呼び出します。
            url = 'createUrl'; // AppServerへのアクセスに使用されるエンドポイントを指定します。
          }
        
          // 次のサンプルコードは、アップロード資格情報を指定する方法の例を示しています。
          // 必要なパラメーターは、AppServerによって呼び出されるメソッドによって異なります。 UploadAuth、UploadAddress、およびVideoIdパラメーターを設定する必要がある場合があります。
          fetch(url)
            . then((res) => res.json())
            .then((data) => {
                uploader.setUploadAuthAndAddress(uploadInfo、data.UploadAuth、data.UploadAddress、data.VideoId);
          });
        },
        
        // このコールバックは、アップロード資格情報の有効期限が切れると発生します。
        'onUploadTokenExpired': function (uploadInfo) {
          // 実装中に、RefreshUploadVideo操作を呼び出して、uploadInfo.videoIdパラメーターに基づいてUploadAuthパラメーターの新しい値を取得します。
          // ApsaraVideo VODから取得したuploadAuthパラメーターの新しい値をSDKで指定します。
        
          var url = 'refreshUrl'; // AppServerへのアクセスに使用されるエンドポイントを指定します。
          // 次のサンプルコードは、アップロード資格情報を指定する方法の例を示しています。
          // 必要なパラメーターは、AppServerによって呼び出されるメソッドによって異なります。 UploadAuth、UploadAddress、およびVideoIdパラメーターを設定する必要がある場合があります。
          fetch(url)
            .then((res) => res.json())
            . then((データ) => {
            uploader.resumeUploadWithAuth(data.UploadAuth);
          });
        },

      • STSトークンの使用

        Specify the obtained STS token in the SDK by calling the setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken); method in the onUploadStarted callback that is fired when the upload starts.

        重要 STSトークンの有効期限が切れると、onUploadTokenExpiredコールバックが発生します。 resumeUploadWithSTSTSToken (accessKeyId, accessKeySecret, secretToken) メソッドを呼び出して、新しいSTSトークンを使用してアップロードを再開します。

        onUploadstarted: 関数 (uploadInfo) {
          // STSトークンを使用してファイルをアップロードする場合は、uploader.setUploadAuthAndAddressメソッドを呼び出す必要があります。
          var stsUrl = 'stsUrl';
          // 次のサンプルコードは、アップロード資格情報を指定する方法の例を示しています。
          // 必要なパラメーターは、AppServerによって呼び出されるメソッドによって異なります。 accessKeyId、accessKeySecret、およびsecretTokenパラメーターを設定する必要がある場合があります。
          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トークンを使用してアップロードを再開できます。
          // アップロードされたファイルが大きすぎるため、アップロード中にSTSトークンが無効になっている場合は、onUploadTokenExpiredコールバックでresumeUploadWithSTSTokenメソッドを呼び出す必要があります。
        
          var stsUrl = 'stsUrl';
          // 次のサンプルコードは、アップロード資格情報を指定する方法の例を示しています。
          // 必要なパラメーターは、AppServerによって呼び出されるメソッドによって異なります。 accessKeyId、accessKeySecret、およびsecretTokenパラメーターを設定する必要がある場合があります。
          fetch(stsUrl)
            . then((res) => res.json())
            . then((データ) => {
            var info = data.SecurityTokenInfo
            uploader. resumeUploadWithSTSTSToken (info.AccessKeyId、info.AccessKeySecret、info.SecretToken);
          });
        },

4. アップロードするファイルのタイプに基づいて、アップロードパラメーターを作成します。
   1. アップロードするファイルを選択します。

       <form action="">
         <input type="file" name="file" id="files" multiple/>
       </form>
       userData = '';
       document.getElementById("files")
        .addEventListener('change', function (event) {
          for(var i=0; i<event.target.files.length; i++) {
            // ロジックコード。
          }
        });

   2. Add the selected file to the upload list.

      uploader.addFile (ファイル、null、null、null、'{"Vod" :{}}');

      パラメーター	必須／任意	タイプ	説明
      file	必須	File	The audio or video file to be uploaded.
      エンドポイント	任意	String	OSSエンドポイント。 Specify the OSS endpoint based on the region to which you want to upload the file. If you specify null, the actual value is determined by the AppServer.
      バケット	任意	String	ファイルをアップロードするバケット。 nullを指定した場合、実際の値はAppServerによって決定されます。
      オブジェクト	任意	String	ファイルをアップロードするオブジェクト。 nullを指定した場合、実際の値はAppServerによって決定されます。
      paramData	任意	String	If you use an STS token to upload the file, the paramData parameter can be used to configure audio information. paramDataパラメーターの値は、文字列形式のJSONオブジェクトです。 このJSONオブジェクトでは、最初のVodパラメーターを指定する必要があります。 paramDataパラメーターでサポートされているパラメーターをVodパラメーターの下にネストできます。 詳細は、「CreateUploadVideo」をご参照ください。

      paramDataパラメーターのサンプルコード:

      var paramData = '{"Vod":{"Title":"test","CateId":"234"}}';

      注 STSトークンを使用してファイルをアップロードする場合にのみ、SDKでparamDataパラメーターを指定する必要があります。 アップロードURLとアップロード資格情報を使用してファイルをアップロードする場合は、SDKではなくCreateUploadVideo操作のリクエストでparamDataパラメーターを指定できます。
5. Start the upload.
   注 You can upload only a video or audio file from a client.
   1. startUpload() メソッドを呼び出して、アップロードを開始します。

      uploader.startUpload();

   2. After the upload starts, the onUploadProgress callback is fired to synchronize the upload progress.
   3. ファイルがアップロードされると、onUploadSucceedコールバックが起動され、アップロード結果が返されます。

• ビデオがアップロードされると、videoIdパラメーターが返されます。 videoIdパラメーターの値は、ビデオIDを示します。 Then, you must obtain a streaming URL to play the video. For more information, see Use playback credentials to play videos.
• イメージがアップロードされると、imageUrlパラメーターが返されます。 The value of the imageUrl parameter indicates the image URL. URL署名が有効になっている場合、イメージURLは特定の期間後に期限切れになります。 詳細については、「URL認証の設定」をご参照ください。

Manage the upload list

権限付与設定の設定

• アップロードURLと資格情報の指定

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

  var info = data.SecurityTokenInfo
  uploader.setSTSToken(uploadInfo,info.AccessKeyId,info.AccessKeySecret,info.SecretToken);

  パラメーター	説明
  uploadInfo	この値は、onUploadstartedコールバックの最初のパラメーターから取得できます。
  uploadAuth	値は、CreateUploadVideo操作の応答から取得できます。
  uploadAddress	The value can be obtained from the response of the CreateUploadVideo operation.
  videoId	値は、CreateUploadVideo操作の応答から取得できます。

• アップロード資格情報の有効期限が切れた後にアップロードを再開する

  このメソッドは、onUploadTokenExpiredコールバックで呼び出されます。 資格情報の有効期限が切れると、このメソッドで新しいアップロード資格情報を指定できます。 uploadAuthパラメーターを、RefreshUploadVideo操作によって返された新しいアップロード資格情報に設定します。

  const {VideoId,UploadAuth,UploadAddress} =データ;
  uploader.resumeUploadWithAuth(UploadAuth);

• Specify the STS token

  このメソッドは、STSトークンを使用してファイルをアップロードする場合に呼び出されます。 onUploadstartedコールバックでSTSトークンを指定します。 コールバックパラメーターには、uploadInfoパラメーターが含まれます。

  const {VideoId,UploadAuth,UploadAddress} =データ;
  uploader.setUploadAuthAndAddress(uploadInfo、UploadAuth、UploadAddress、VideoId);

  パラメーター	説明
  uploadInfo	この値は、onUploadstartedコールバックの最初のパラメーターから取得できます。
  accessKeyId	値は、CreateSecurityToken操作の応答から取得できます。
  accessKeySecret	値は、CreateSecurityToken操作の応答から取得できます。
  secretToken	値は、CreateSecurityToken操作の応答から取得できます。

• STSトークンの有効期限が切れた後にアップロードを再開する

  このメソッドは、onUploadTokenExpiredコールバックで呼び出されます。 STSトークンの有効期限が切れると、このメソッドで新しいSTSトークンを指定できます。

  var info = data.SecurityTokenInfo
  uploader. resumeUploadWithSTSTSToken (info.AccessKeyId、info.AccessKeySecret、info.SecretToken);

アップロードの制御

アップロードの停止

uploader.stopUpload();

高度な機能

ファイルのアップロード中に、ページのシャットダウンやブラウザの故障によりアップロードが中断されることがあります。 この場合、ファイルを再度アップロードすると、SDKは中断されたアップロードを再開し、onUploadstartedコールバックからアップロード資格情報を取得します。 アップロードURLと資格情報を使用してファイルをアップロードする場合、コールバックで返されるvideoIdパラメーターの値を使用して、ブレークポイントに関する情報を照会できます。 次のサンプルコードに例を示します。

onUploadstarted': 関数 (uploadInfo) {
if (アップロード方法1) {
  if(!uploadInfo.videoId)// ファイルをアップロードするときに例外は発生しません。
  {
    // 環境でCreateUploadVideo操作を呼び出します。
    uploader.setUploadAuthAndAddress(uploadInfo、uploadAuth、uploadAddress、videoId);
  }
  else // videoIdパラメーターに値がある場合は、値に基づいてアップロード資格情報を更新します。
  {
    // 環境でRefreshUploadVideo操作を呼び出して、アップロード資格情報を更新します。
    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress);
  }
}
else (アップロード方法2)
{
   // 環境でSTSトークンを取得するための操作を呼び出します。
   uploader.setSTSToken(uploadInfo、accessKeyId、accessKeySecret、secretToken);
}
}

次のメソッドを呼び出して、ブレークポイント情報を取得できます。

 uploader.getCheckpoint (ファイル);