vue与阿里云点播插件集成实现视频上传

Z时代
2024-01-10
分类：综合

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