ApsaraVideo VOD:JavaScript 用アップロード SDK

方法 1: アップロード URL と資格情報

アップロード URL と資格情報を設定するには、setUploadAuthAndAddress メソッドを呼び出します。資格情報が期限切れになると、システムは onUploadTokenExpired コールバックをトリガーします。この場合、resumeUploadWithAuth メソッドを呼び出して新しいアップロード資格情報を設定し、アップロードを再開する必要があります。

// アップロードが開始されます。
onUploadstarted: function (uploadInfo) {
  let refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId
  axios.get(refreshUrl).then(({data}) => {
    let uploadAuth = data.UploadAuth
    let uploadAddress = data.UploadAddress
    let videoId = data.VideoId
    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)
  })
},
// アップロード資格情報が期限切れです。
onUploadTokenExpired: function (uploadInfo) {
  // 方法 1 (UploadAuth) を使用して大きなファイルをアップロードするとタイムアウトした場合、
  // uploadInfo.videoId に基づいて RefreshUploadVideo 操作を呼び出し、UploadAuth の値を再取得します。
  // 次に、resumeUploadWithAuth メソッドを呼び出します。この例では、resumeUploadWithAuth はテストメソッドであるため、UploadAuth の値は直接取得されます。
  let refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId
  axios.get(refreshUrl).then(({data}) => {
    let uploadAuth = data.UploadAuth
    uploader.resumeUploadWithAuth(uploadAuth)
    console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
  })
  self.statusText = 'The upload times out...'
},

メソッドの説明

uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
uploader.resumeUploadWithAuth(uploadAuth)

方法 2: STS トークン

STS トークンを設定するには、setSTSToken メソッドを呼び出します。トークンが無効になると、システムは onUploadTokenExpired コールバックをトリガーします。この場合、resumeUploadWithSTSToken メソッドを呼び出して新しい STS トークンを設定し、アップロードを再開する必要があります。

 /*コールバックメソッド - アップロードが開始されます。*/
 onUploadstarted: function (uploadInfo) {
    let stsUrl = "***.***.stsUrl" /*setSTSToken メソッドを使用して STS トークンを取得します。*/
    axios.get(stsUrl).then(({data}) => {
          var info = data.SecurityTokenInfo
          uploader.setSTSToken(uploadInfo, info.AccessKeyId, info.AccessKeySecret, info.SecretToken);
     })
 },
/*コールバックメソッド - 資格情報がタイムアウトします。*/
 onUploadTokenExpired: function (uploadInfo) { 
     let stsUrl = "***.***.stsUrl"  /*resumeUploadWithSTSToken メソッドを使用して STS トークンを更新します。*/
     axios.get(stsUrl).then(({data}) => {
         var info = data.SecurityTokenInfo  
         uploader.resumeUploadWithSTSToken(info.AccessKeyId, info.AccessKeySecret, info.SecretToken);      
     })
 },

メソッドの説明

uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken)
uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken)

ネイティブ JavaScript

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

Vue

 <template>
  <input type="file" id="fileUpload" @change="fileChange($event)">
 </template>

<script>
  export default {
    data () {
      return {
        file: null,
      }
    },
    methods: {
      fileChange (e) {
        this.file = e.target.files[0]
        if (!this.file) {
          alert("アップロードするファイルを選択してください。")
          return
        }
        var Title = this.file.name
        var userData = '{"Vod":{}}'
        if (this.uploader) {
          this.uploader.stopUpload()
        }
        // アップローダーを初期化します。
        this.uploader = this.createUploader() 
        this.uploader.addFile(this.file, null, null, null, userData)
      },
    }
  }
</script>