vue 上传视频到阿里云

	1
//获取 flie 文件然后执行 fileChange 方法
fileChange (data) {
  console.log(data)
  this.file = data.file
  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
  this.authUpload()
},
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(uploadInfo)
      console.log("addFileSuccess: " + uploadInfo.file.name)
    },
    // 开始上传
    onUploadstarted: function (uploadInfo) {
        console.log(uploadInfo)
      if (!uploadInfo.videoId) {
            let params = {
                  title: uploadInfo.file.name,
                  fileName: uploadInfo.file.name
              }
              //从后台获取上传凭证及上传方法 前端找了很久没发现怎么搞
          getCreateUploadVideoResponse(params).then(res => {
              let data = JSON.parse(res.data)
              let { uploadAuth,uploadAddress,videoId} = data;
              uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)
          })
          self.statusText = '文件开始上传...'
      } else {
      }
    },
    // 文件上传成功
    onUploadSucceed: function (uploadInfo) {
      self.statusText = '文件上传成功!'
      setTimeout(() => {
          self.isUpload = false;
      },1000)
      self.addParams.videoId = uploadInfo.videoId;
    },
    // 文件上传失败
    onUploadFailed: function (uploadInfo, code, message) {
      self.statusText = '文件上传失败!'
    },
    // 取消文件上传
    onUploadCanceled: function (uploadInfo, code, message) {
      self.statusText = '文件已暂停上传'
    },
    // 文件上传进度,单位:字节, 可以在这个函数中拿到上传进度并显示在页面上
    onUploadProgress: function (uploadInfo, totalSize, progress) {
		//进度条
      let progressPercent = Math.ceil(progress * 100)
      self.authProgress = progressPercent
      self.statusText = '文件上传中...'
      self.progressPercent = Math.ceil(progress * 100)
    },
    // 上传凭证超时
    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
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值