上傳視頻到阿里雲

選取視頻，視頻啟動上傳，上傳之后獲取視頻信息

引入

<!--  IE需要es6-promise   index.html中引入  以下文件放在public文件夾下不然會報錯  https://blog.csdn.net/qq_38409264/article/details/109197732-->

  <script src="../lib/es6-promise.min.js"></script>
  <script src="../lib/aliyun-oss-sdk6.10.0.min.js"></script>
  <script src="../aliyun-vod-upload-sdk1.5.2.min.js"></script>

2、需要素材

　　（1）阿里雲id

　　（2）視頻上傳憑證，由后台接口提供

    //選視頻
    videoAfterRead(file) {      
      if (this.fileList.length > 0) {
        this.imgFlag = false;
      }

      Toast.loading({
        message: '上傳中...',
        forbidClick: true,
        duration: 0,
        overlay:true,
        className:'punchLoading'
      });
      // Toast.setDefaultOptions({ duration: 2000 });

      console.log('this.fileList')
      console.log(this.fileList)
      //顯示加載中
      // this.fileList[0].status = 'uploading';
      // this.fileList[0].message = '上傳中...';

      //拿到本地上傳的file,獲取憑證時使用
      this.title = file.file.name.substring(0,file.file.name.length-4);
      this.fileName = file.file.name;
      this.file = file.file;
      var userData = '{"Vod":{}}';
      this.uploader = this.createVideoUploader();
      //獲取到用戶選擇的文件后，添加到上傳列表中。
      this.uploader.addFile(this.file, null, null, null, userData)    
      this.authUpload()
      console.log('111111111111111111111')
      console.log(this.videoId)
    },

    //獲取視頻信息
    getVideoInfo(videoId){
      let params ={
        videoId:videoId
      }
      getDetailGet("/api/v1/sys/getPlayInfo", { params: params})
      .then((res) => {
        console.log("視頻信息");
        console.log(res);
        if(res.data==null){
          setTimeout(()=>{
            this.getVideoInfo(videoId)
          },1000)
        }
        // console.log('last')
        // console.log(res.data.playInfoList[1].playURL)
        // console.log(res.data.videoBase.coverURL)
        
        res.data.playInfoList.forEach(item=>{
          console.log('我是視頻連接')
          console.log(item.playURL)
          
          if(item.playURL.indexOf('mp4') != -1){
            this.playURL = item.playURL
          }
        })
      
        
        this.coverURL = res.data.videoBase.coverURL;

        console.log('this.playURL')
        console.log(this.playURL)
        console.log(this.coverURL)

        if(this.coverURL){

          Toast.success({
            message:'上傳成功',
            forbidClick: true,
            overlay:true,
            duration:1000,
            className:'punchSuccess'
          });
          
        }

      
      })
      .catch((error) => {
        console.log(error)
      });
    },
    

  
      //視頻上傳
      authUpload () {
        console.log('我是上傳2')
        // 然后調用 startUpload 方法, 開始上傳
        if (this.uploader !== null) {          
          this.uploader.startUpload()
          // this.uploadDisabled = true
          // this.pauseDisabled = false
        }
      },

 

 

 

 

上傳視頻

 createVideoUploader (type) {
        let self = this
        let uploader = new AliyunUpload.Vod({
          timeout: self.timeout || 60000,
          partSize: self.partSize || 1048576,
          parallel: self.parallel || 5,
          retryCount: self.retryCount || 3,
          retryDuration: self.retryDuration || 2,
          region: self.region, //視頻上傳區域
          userId: self.userId,　　//阿里雲賬號id
          // 添加文件成功
          addFileSuccess: function (uploadInfo) {
            self.uploadDisabled = false
            self.resumeDisabled = false
            // self.statusText = '添加文件成功, 等待上傳...'
            console.log("addFileSuccess: " + uploadInfo.file.name)
          },
          // 開始上傳
          onUploadstarted: async function (uploadInfo) {
            console.log('開始上傳')
            console.log(uploadInfo.videoId)
            console.log('開始上傳')
            if (!uploadInfo.videoId) {
              getDetailGet("/api/v1/sys/getVideoAddressAndAuth", { params: {title:self.title,fileName:self.fileName } }) //后台給到接口獲取上傳憑證
              .then((res) => {
                console.log("上傳視頻憑證1");
                console.log(res);
                let uploadAddress = res.data.uploadAddress;
                let uploadAuth = res.data.uploadAuth;
                let videoId = res.data.videoId
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)      
              })
              .catch((error) => {
                console.log(error)
              });
              console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            } else {
              getDetailGet("/api/v1/sys/refreshUploadVideo", { params: {videoId:uploadInfo.videoId } })
              .then((res) => {
                console.log("上傳視頻憑證2");
                console.log(res);
                let uploadAddress = res.data.UploadAddress;
                let uploadAuth = res.data.UploadAuth;
                let videoId = res.data.videoId
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)      
              })
              .catch((error) => {
                console.log(error)
              });
            }
          },
          // 文件上傳成功
          onUploadSucceed: function (uploadInfo) {
            console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            console.log(uploadInfo)
            console.log('文件上傳成功2')
            self.videoId = uploadInfo.videoId;
            console.log('self.videoId')
            console.log(self.videoId)
            
           
            // self.status = 'success'
            // self.message = '上傳完成'
          },
          // 文件上傳失敗
          onUploadFailed: function (uploadInfo, code, message) {
            console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
          },
          // 取消文件上傳
          onUploadCanceled: function (uploadInfo, code, message) {
            console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
          },
          // 文件上傳進度，單位：字節, 可以在這個函數中拿到上傳進度並顯示在頁面上
          onUploadProgress: function (uploadInfo, totalSize, progress) {
            console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
            let progressPercent = Math.ceil(progress * 100)
            self.authProgress = progressPercent
            self.statusText = '文件上傳中...'
            console.log('文件上傳中')
          },
          // 上傳憑證超時
          onUploadTokenExpired: function (uploadInfo) {
            // 上傳大文件超時, 如果是上傳方式一即根據 UploadAuth 上傳時
            // 需要根據 uploadInfo.videoId 調用刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)重新獲取 UploadAuth
            // 然后調用 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 = '文件超時...'


            getDetailGet("/api/v1/sys/refreshUploadVideo", { params: {videoId:uploadInfo.videoId } })
              .then((res) => {
                console.log("上傳視頻憑證");
                console.log(res);
                // let uploadAddress = res.data.uploadAddress;
                let uploadAuth = res.data.uploadAuth;
                // let videoId = res.data.videoId
                // uploader.setUploadAuthAndAddress(uploadInfo, UploadAuth, UploadAddress,videoId)      
                uploader.resumeUploadWithAuth(uploadAuth)
              })
              .catch((error) => {
                console.log(error)
              });

            console.log('文件上傳超時')
          },
          // 全部文件上傳結束
          onUploadEnd: function (uploadInfo) {
            console.log("onUploadEnd: uploaded all the files")
       
            console.log('文件上傳完畢')
            console.log(self.videoId)

            // self.status = 'success'
            // self.message = '上傳完成'

            console.log(self.status)
            
            self.getVideoInfo(self.videoId)
            
            
          }
        })
        return uploader
      },

 

阿里雲上傳案例

<template>
  <div class="container">
    <div class="setting">
      <div class="input-control">
        <label for="timeout">請求過期時間（構造參數 timeout, 默認 60000）:</label>
        <input type="text" id="timeout" v-model="timeout" placeholder="輸入過期時間, 單位毫秒">
      </div>

      <div class="input-control">
        <label for="partSize">分片大小（構造參數 partSize, 默認 1048576）:</label>
        <input type="text" class="form-control" id="partSize" v-model="partSize" placeholder="輸入分片大小, 單位bit, 最小100k">
      </div>

      <div class="input-control">
        <label for="parallel">上傳分片數（構造參數 parallel, 默認 5）:</label>
        <input type="text" class="form-control" id="parallel" v-model="parallel" placeholder="輸入並行上傳分片個數, 默認為5">
      </div>

      <div class="input-control">
        <label for="retryCount">網絡失敗重試次數（構造參數 retryCount, 默認 3）:</label>
        <input type="text" class="form-control" id="retryCount" v-model="retryCount" placeholder="輸入網絡失敗重試次數, 默認為3">
      </div>

      <div class="input-control">
        <label for="retryDuration">網絡失敗重試間隔（構造參數 retryDuration, 默認 2）:</label>
        <input type="text" class="form-control" id="retryDuration" v-model="retryDuration" placeholder="輸入網絡失敗重試間隔, 默認2秒">
      </div>

      <div class="input-control">
        <label for="region">配置項 region, 默認 cn-shanghai:</label>
        <select v-model="region">
          <option>cn-shanghai</option>
          <option>eu-central-1</option>
          <option>ap-southeast-1</option>
        </select>
      </div>

      <div class="input-control">
        <label for="userId">阿里雲賬號ID</label>
        <input type="text" class="form-control" v-model="userId" disabled placeholder="輸入阿里雲賬號ID">
        集成產品后需要使用用戶自己的賬號ID,<a href="https://help.aliyun.com/knowledge_detail/37196.html "target="_blank">如何獲取帳號ID</a>
      </div>

    </div>

    <div class="upload">
      <div>
        <input type="file" id="fileUpload" @change="fileChange($event)">
        <label class="status">上傳狀態: <span>{{statusText}}</span></label>
      </div>
      <div class="upload-type">
        上傳方式一, 使用 UploadAuth 上傳:
        <button @click="authUpload" :disabled="uploadDisabled">開始上傳</button>
        <button @click="pauseUpload" :disabled="pauseDisabled">暫停</button>
        <button :disabled="resumeDisabled" @click="resumeUpload">恢復上傳</button>
        <span class="progress">上傳進度: <i id="auth-progress">{{authProgress}}</i> %</span>
      </div>
    </div>
    <div class="info">uploadAuth及uploadAddress參數請查看<a href="https://help.aliyun.com/document_detail/55407.html" target="_blank">獲取上傳地址和憑證</a></div>
  </div>
</template>
<script>
  import axios from 'axios'

  export default {
    data () {
      return {
        timeout: '',
        partSize: '',
        parallel: '',
        retryCount: '',
        retryDuration: '',
        region: 'cn-shanghai',
        userId: '1303984639806000',
        file: null,
        authProgress: 0,
        uploadDisabled: true,
        resumeDisabled: true,
        pauseDisabled: true,
        uploader: null,
        statusText: '',
      }
    },
    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.authProgress = 0
          this.statusText = ""
        }
        this.uploader = this.createUploader()
        console.log(userData)
        this.uploader.addFile(this.file, null, null, null, userData)
        this.uploadDisabled = false
        this.pauseDisabled = true
        this.resumeDisabled = true
      },
      authUpload () {
        // 然后調用 startUpload 方法, 開始上傳
        if (this.uploader !== null) {
          this.uploader.startUpload()
          this.uploadDisabled = true
          this.pauseDisabled = false
        }
      },
      // 暫停上傳
      pauseUpload () {
        if (this.uploader !== null) {
          this.uploader.stopUpload()
          this.resumeDisabled = false
          this.pauseDisabled = true
        }
      },
      // 恢復上傳
      resumeUpload () {
        if (this.uploader !== null) {
          this.uploader.startUpload()
          this.resumeDisabled = true
          this.pauseDisabled = false
        }
      },
      createUploader (type) {
        let self = this
        let uploader = new AliyunUpload.Vod({
          timeout: self.timeout || 60000,
          partSize: self.partSize || 1048576,
          parallel: self.parallel || 5,
          retryCount: self.retryCount || 3,
          retryDuration: self.retryDuration || 2,
          region: self.region,
          userId: self.userId,
          // 添加文件成功
          addFileSuccess: function (uploadInfo) {
            self.uploadDisabled = false
            self.resumeDisabled = false
            self.statusText = '添加文件成功, 等待上傳...'
            console.log("addFileSuccess: " + uploadInfo.file.name)
          },
          // 開始上傳
          onUploadstarted: function (uploadInfo) {
            // 如果是 UploadAuth 上傳方式, 需要調用 uploader.setUploadAuthAndAddress 方法
            // 如果是 UploadAuth 上傳方式, 需要根據 uploadInfo.videoId是否有值，調用點播的不同接口獲取uploadauth和uploadAddress
            // 如果 uploadInfo.videoId 有值，調用刷新視頻上傳憑證接口，否則調用創建視頻上傳憑證接口
            // 注意: 這里是測試 demo 所以直接調用了獲取 UploadAuth 的測試接口, 用戶在使用時需要判斷 uploadInfo.videoId 存在與否從而調用 openApi
            // 如果 uploadInfo.videoId 存在, 調用 刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)
            // 如果 uploadInfo.videoId 不存在,調用 獲取視頻上傳地址和憑證接口(https://help.aliyun.com/document_detail/55407.html)
            if (!uploadInfo.videoId) {
              let createUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/CreateUploadVideo?Title=testvod1&FileName=aa.mp4&BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&VideoId=5bfcc7864fc14b96972842172207c9e6'
              axios.get(createUrl).then(({data}) => {
                let uploadAuth = data.UploadAuth
                let uploadAddress = data.UploadAddress
                let videoId = data.VideoId
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)                
              })
              self.statusText = '文件開始上傳...'
              console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            } else {
              // 如果videoId有值，根據videoId刷新上傳憑證
              // https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
              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)
              })
            }
          },
          // 文件上傳成功
          onUploadSucceed: function (uploadInfo) {
            console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            self.statusText = '文件上傳成功!'
          },
          // 文件上傳失敗
          onUploadFailed: function (uploadInfo, code, message) {
            console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
            self.statusText = '文件上傳失敗!'
          },
          // 取消文件上傳
          onUploadCanceled: function (uploadInfo, code, message) {
            console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
            self.statusText = '文件已暫停上傳'
          },
          // 文件上傳進度，單位：字節, 可以在這個函數中拿到上傳進度並顯示在頁面上
          onUploadProgress: function (uploadInfo, totalSize, progress) {
            console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
            let progressPercent = Math.ceil(progress * 100)
            self.authProgress = progressPercent
            self.statusText = '文件上傳中...'
          },
          // 上傳憑證超時
          onUploadTokenExpired: function (uploadInfo) {
            // 上傳大文件超時, 如果是上傳方式一即根據 UploadAuth 上傳時
            // 需要根據 uploadInfo.videoId 調用刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)重新獲取 UploadAuth
            // 然后調用 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 = '文件超時...'
          },
          // 全部文件上傳結束
          onUploadEnd: function (uploadInfo) {
            console.log("onUploadEnd: uploaded all the files")
            self.statusText = '文件上傳完畢'
          }
        })
        return uploader
      }
    }
  }
</script>