Vueがビデオアップロード機能を実装

<テンプレート>
  <div class="コンテナ">
    <el-card>
      <div スロット="ヘッダー">
        <div>コース:</div>
        <div>ステージ:</div>
        <div>授業時間:</div>
      </div>
      <el-form ラベル幅="40px">
        <el-form-item label="ビデオ">
          <入力
            ref="ビデオファイル"
            タイプ="ファイル"
          >
        </el-form-item>
        <el-form-item label="カバー">
          <入力
            ref="画像ファイル"
            タイプ="ファイル"
          />
        </el-form-item>
        <el-form-item>
          <el-ボタン
            タイプ="プライマリ"
            @click="認証アップロード"
          >アップロードを開始</el-button>
          <el-button>戻る</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</テンプレート>
<スクリプト>
/* eslint を無効にする */
'axios' から axios をインポートします
輸入 {
  aliyunImagUploadAddressAdnAuth、
  aliyunビデオアップロードアドレスAdnAuth、
  トランスコードビデオ、
  AliyunTransCodeパーセントを取得する
} '@/services/aliyun-oss' から

エクスポートデフォルト{
  データ （） {
    戻る {
      アップローダー: null、
      ビデオID: null、
      画像URL: ''、
      ファイル名： ''
    }
  },
  作成された（）{
    この.initUploader()
  },
  メソッド: {
    authUpload() {
      const videoFile = this.$refs['ビデオファイル'].files[0]
      this.uploader.addFile(ビデオファイル、null、null、null、'{"Vod":{}}')
      this.uploader.addFile(this.$refs['画像ファイル'].files[0], null, null, null, '{"Vod":{}}')
      this.fileName = ビデオファイル名
      this.uploader.startUpload()
    },
    アップローダーの初期化（）{
      this.uploader = 新しいウィンドウ.AliyunUpload.Vod({
        // Ali アカウント ID には値が必要です。値は https://help.aliyun.com/knowledge_detail/37196.html から取得されます。
        ユーザーID: 1618139964448548、
        // VOD にアップロードするリージョン。デフォルト値は 'cn-shanghai'、//eu-central-1、ap-southeast-1
        地域: 'cn-shanghai'、
        // デフォルトのフラグメントサイズは 1M で、100K 未満にはできません
        パーツサイズ: 1048576,
        // 並行してアップロードするシャードの数。デフォルトは 5 です
        並列: 5,
        // ネットワーク障害が発生した場合の再アップロード回数、デフォルトは 3 回
        再試行回数: 3,
        // ネットワーク障害が発生した場合、再アップロード間隔はデフォルトで 2 秒です。retryDuration: 2、
        // アップロードを開始 onUploadstarted: async uploadInfo => {
          console.log('onUploadstarted', アップロード情報)
          uploadAuthInfo を null にします
          アップロード情報に画像が含まれている場合
            const {データ} = aliyunImagUploadAddressAdnAuth() を待機します
            this.imageUrl = data.data.imageURL
            アップロード認証情報 = data.data
          } それ以外 {
            const {データ} = aliyunVideoUploadAddressAdnAuth({
              ファイル名: uploadInfo.file.name
            })
            this.videoId = データ.data.videoId
            アップロード認証情報 = data.data
          }
          
          // コンソールログ('uploadAuthInfo', uploadAuthInfo)

          this.uploader.setUploadAuthAndAddress(
            アップロード情報、
            アップロードAuthInfo.アップロードAuth、
            アップロードAuthInfo.アップロードアドレス、
            アップロード認証情報.ビデオID || アップロード認証情報.画像ID
          ）
        },
        // ファイルのアップロードが成功しました onUploadSucceed: function (uploadInfo) {
          console.log('onUploadSucceed', アップロード情報)
        },
        // ファイルのアップロードに失敗しました onUploadFailed: function (uploadInfo, code, message) {
          コンソールログ('onUploadFailed')
        },
        // ファイルアップロードの進行状況、単位: バイト onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {
        },
        // アップロード認証情報のタイムアウト onUploadTokenExpired: function (uploadInfo) {
          コンソールログ('onUploadTokenExpired')
        },
        // アップロードされたすべてのファイルが完了した onUploadEnd: async uploadInfo => {
          コンソール.log(アップロード情報)
          コンソール.log({
            レッスンID: this.$route.query.lessonId、
            ファイルID: this.videoId、
            カバー画像URL: this.imageUrl、
            ファイル名: this.fileName
          })
          const {データ} = transCodeVideoを待機します({
            レッスンID: this.$route.query.lessonId、
            ファイルID: this.videoId、
            カバー画像URL: this.imageUrl、
            ファイル名: this.fileName
          })
          コンソール.log(データ)

          setInterval(非同期() => {
             const {データ} = getAliyunTransCodePercent(this.$route.query.lessonId) を待機します
             console.log('トランスコーディングの進行状況', データ)
          }, 3000)
        }
      })
    }
  }
}
</スクリプト>

/**
 * Alibaba Cloudにアップロード*/

'@/utils/request' からリクエストをインポートします

エクスポートconst aliyunImagUploadAddressAdnAuth = () => {
  リクエストを返す({
    メソッド: 'GET'、
    url: '/boss/course/upload/aliyunImagUploadAddressAdnAuth.json'
  })
}

エクスポートconst aliyunVideoUploadAddressAdnAuth = (params: any) => {
  リクエストを返す({
    メソッド: 'GET'、
    url: '/boss/course/upload/aliyunVideoUploadAddressAdnAuth.json',
    パラメータ
  })
}

エクスポート const transCodeVideo = (データ: 任意) => {
  リクエストを返す({
    メソッド: 'POST'、
    url: '/boss/course/upload/aliyunTransCode.json',
    データ
  })
}

エクスポートconst getAliyunTransCodePercent = (lessonId: 文字列 | 数値) => {
  リクエストを返す({
    メソッド: 'GET'、
    url: '/boss/course/upload/aliyunTransCodePercent.json',
    パラメータ: {
      レッスンID
    }
  })
}