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()
  },

 

结束：（我去掉了上传的日志输出，改成了显示上传进度）
我使用的是比较笨拙的引入方式，如有更好的方式可以共享出来供大家学习