vue與阿里雲點播插件集成實現視頻上傳

方式有多種，我使用的是比較笨拙的方式

第一步，通過index.html 引入阿里雲需要的js插件，js文件最好放在cdn上,XXX為cdn地址

 <script src="http://XXX/lib/es6-promise.min.js"></script>
 <script src="http://XXX/lib/aliyun-oss-sdk.min.js"></script>
 <script src="http://XXX/aliyun-vod-upload-sdk-1.2.0.min.js"></script>

第二步，vue代碼實現

1、定義變量

 data() {
　　return {  videoId: ‘’,  requestId: ‘’,  uploadAddress: ‘’, uploadAuth: null, myUploader: null,  uploadProgress: ‘’,  textarea: ‘’,  } }

2、獲取上傳憑證

getAuth(callback) { //獲取上傳憑證
　　//注意：此接口根據自己后台提供的獲取憑證接口來
　　doGetUploadVideo(this.VideoForm).then((res) => {
　　if (res.state === ‘ok’) {
　　　　this.videoId = res.data.videoId
　　　　this.requestId = res.data.requestId
　　　　this.uploadAddress = res.data.uploadAddress
　　　　this.uploadAuth = res.data.uploadAuth
　　} else {
　　　　this.$message({
　　　　　　message: ‘獲取上傳認證失敗!’,
　　　　　　type: ‘error’
　　　　})
　　}
　　callback()
　　})
}

            onFileChange() { 
          
        console.log('file-chooser', this.$refs['file-chooser']) 
          
        const fileChooser = this.$refs['file-chooser'] 
          
        if (fileChooser.files) { 
          
          const fileList = fileChooser.files 
          
          for (let i = 0; i < fileList.length; i++) { 
          
            const file = fileList[i] 
          
            const fileName =  
          file.name 
          
            this.VideoForm.fileName = fileName 
          
            this.VideoForm.title = fileName.substring(0, fileName.lastIndexOf('.')) 
          
            this.VideoForm.cate = 0 
          
            this.VideoForm.tags = '' 
          
            this.getAuth(() => { 
          
              if (this.isVodMode()) { 
          
                var userData = '{"Vod":{"UserData":"{"IsShowWaterMark":"false","Priority":"7"}"}}' 
          
                this.getUpload() 
          
                // 點播上傳。每次上傳都是獨立的OSS object，所以添加文件時，不需要設置OSS的屬性 
          
                this.myUploader.addFile(file, null, null, null, userData) 
          
              } 
          
            }) 
          
          } 
          
        } 
          
      } 
         

3、阿里雲上傳方法處理

 isVodMode() {
    return (this.uploadAuth && this.uploadAuth.length > 0)
  },
  getUpload() {
    const _this = this
    if (_this.myUploader === null) {
      console.log('this.myUploader', _this.myUploader)
      /* eslint no-undef: "off" */
      _this.myUploader = new AliyunUpload.Vod({
        // 分片大小默認1M
        partSize: 1048576,
        // 並行上傳分片個數，默認5
        parallel: 5,
        // 網絡原因失敗時，重新上傳次數，默認為3
        retryCount: 3,
        // 網絡原因失敗時，重新上傳間隔時間，默認為2秒
        retryDuration: 2,
        // 文件上傳失敗
        'onUploadFailed': (uploadInfo, code, message) => {
          console.log('onUploadFailed: file:' + uploadInfo.file.name + ',code:' + code + ', message:' + message)
        },
        // 文件上傳完成
        'onUploadSucceed': (uploadInfo) => {
          console.log('=========onUploadSucceed: ' + uploadInfo.file.name + ', endpoint:' + uploadInfo.endpoint + ', bucket:' + uploadInfo.bucket + ', object:' + uploadInfo.object)
          _this.isShowProgressDialog = false
          _this._doContinueAdd() // --------------上傳成功后，把數據給后台
        },
        // 文件上傳進度
        'onUploadProgress': (uploadInfo, totalSize, loadedPercent) => {
          console.log('onUploadProgress:file:' + uploadInfo.file.name + ', fileSize:' + totalSize + ', percent:' + Math.ceil(loadedPercent * 100) + '%')
          _this.uploadProgress = Math.ceil(loadedPercent * 100)
          _this.isShowProgressDialog = true //--------在此調用進度顯示，不需要的進度條的可去掉
        },
        // STS臨時賬號會過期，過期時觸發函數
        'onUploadTokenExpired': () => {
          _this.log('onUploadTokenExpired')
          if (_this.isVodMode()) {
            // 實現時，從新獲取UploadAuth
            _this.myUploader.resumeUploadWithAuth(this.uploadAuth)
          }
        },
        // 開始上傳
        'onUploadstarted': (uploadInfo) => {
          if (_this.isVodMode()) {
            _this.myUploader.setUploadAuthAndAddress(uploadInfo,
              _this.uploadAuth, _this.uploadAddress)
          }
          console.log('onUploadStarted:' + uploadInfo.file.name + ', endpoint:' + uploadInfo.endpoint + ', bucket:" + uploadInfo.bucket + ", object:' + uploadInfo.object + uploadInfo.userDate)
        }
      })
    }
    if (_this.isVodMode()) {
      _this.myUploader.init() // 點播上傳。每次上傳都是獨立的鑒權，所以初始化時，不需要設置鑒權
    }
  },
  start(callback) {
    this.myUploader.startUpload()
    callback()
  },

 

結束：（我去掉了上傳的日志輸出，改成了顯示上傳進度）
我使用的是比較笨拙的引入方式，如有更好的方式可以共享出來供大家學習