Vue中And design 上传视频到腾讯云云点播（保姆级）

关于报错：ugc upload | signature has no permission，腾讯云上传视频10003||10013的问题，这个是因为你的签名那部分。具体看文章最底下。

在终端通过npm安装vod-js-sdk-v6

npm install cos-js-sdk-v6

在main.js中全局引入，（页面不用引入）

（这边如果你只有一个地方需要用到这个上传视频到腾讯云，你可以自己在页面内引入也行。这边提供的是全局引入方法），那这边就别写Vue.use(TcVod)了。好像会报错。

import TcVod from 'vod-js-sdk-v6'
Vue.prototype.$TcVod = TcVod

在template中放入标签：

重点位置在uploadVideoChanged（）这个方法。其他的可以自己替换。怎么好看怎么来。就大概我是这样。input type=file accept=‘.MP4’这个就是调起上传文件。你可以改成其他的比如button啊，或者点击图标icon之类的。反正样式自己改。

    <!--        //选择视频文件-->
        <input type="file" accept=".mp4" @change="uploadVideoChanged($event)">
        <!--        腾讯云点播上传视频-->
          <a-button type="primary" style="margin-right: 10px" @click="uploadVideoFile">{{ !vIsUploading?'上传视频':'正在上传' }}</a-button>
        <!--        取消上传-->

        <div class="video_upload_progress">
          <!--          //上传进度条-->
          <a-progress :percent="vProgress*100" :status="vStatus" />
       <a-button v-show="vIsUploading" @click="uploadVideoFileCancel">取消上传</a-button>

在data（）里面加入：

配置，这边copy就可以了，然后最下面这个getSignAPI,这个是我这边后台生成签名的接口（这个接口你自己处理了。跟后端要，或者看官方的文档自己写个生成。需要会java或者go或者python或者node。。。）。有签名才能执行上传。

 // 云点播配置下
      newsVideoUrl: '', // 视频文件地址
      fileId: '', // 文件id
      vFile: {}, // 视频文件File对象
      vIsFileExist: false, // File对象是否存在
      vUploader: {}, // 腾讯云上传的初始化对象
      vProgress: 0, // 视频上传进度
      vStatus: 'active', // 视频上传状态,string类型： active正在上传，success成功，exception失败
      vIsUploading: false, // 是否正在上传
      getSignAPI: window.GetApi('getSign'),
      // 云点播配置上

在methods中写入标签

当然这边也是只需要copy就行。记得改掉签名的部分，你自己接口写的签名是什么，就把this.upload替换掉。我这边的this.upload是把签名放在这里面了。

签名this.upload栗子在这：

就是上文写的getSignAPI，调用了这个接口获取了2个值，这个接口看官方文档可以自己后台写个。

upload: {
  activityInterstingId: '',
  mediaId: '',
},

 // 云点播配置下：
    // 选择视频文件
    uploadVideoChanged(e) {
      if (e.currentTarget.files[0]) { // 选择了文件
        if (e.currentTarget.files[0].type == 'video/mp4') {
          this.vFile = e.currentTarget.files[0] // 获取上传文件中的File对象信息
          console.log(this.vFile, e.currentTarget, 'uploadVideoChanged')
          this.vIsFileExist = true
        } else {
          this.$message.warning('仅支持mp4格式的视频上传')
        }
        // console.log(vFile.size/1024/1024)
      } else { // 取消选择文件
        this.vFile = {}
        this.vIsFileExist = false
      }
    },
    // 腾讯云点播上传视频
    uploadVideoFile() {
      if (this.vIsFileExist == false) {
        this.$message.warning('请先选择视频文件')
        return
      } else if (this.vIsUploading) {
        this.$message.warning('正在上传中，请勿重复上传')
        return
      } else if (this.vStatus == 'success') {
        this.$message.warning('当前视频已上传完毕，请勿重复上传')
        return
      }
      // 获取腾讯云点播视频上传签名,这里注意：必须用函数表达式这种方式定义getSignature函数才行(如下)，使用Vue的传统方式：先声明getSignature(){}函数再this.getSignature()调用这种方式不会生效也不报错。这是个坑
      const getVideoSignature = () => {
        return this.getSignAPI.getSign(this.upload).then(res => { // 获取签名
          console.log(res,'qm')
          if (res.code == '000') {
            return res.data
          }
        }).catch(() => {})
      }
      const tcVod = new this.$TcVod({ // 腾讯云-添加签名
        getSignature: getVideoSignature
      })
      this.vUploader = tcVod.upload({ // 腾讯云-初始化上传功能
        mediaFile: this.vFile
      })
      this.vStatus = 'active' // 正在上传状态
      this.vIsUploading = true // 是否正在上传
      this.vUploader.on('media_progress', (info) => { // 获取上传进度信息
        this.vProgress = info.percent
      })
      this.vUploader.done().then(res => { // 上传完成回调
        this.$message.success('视频文件上传成功,请等待审核')

        this.vStatus = 'success'
        this.vIsUploading = false
        this.newsVideoUrl = res.video.url
        this.fileId = res.fileId
        this.$message.success('添加成功，请等待审核')
        this.$emit('doChange')
        this.$emit('cancel')
      }).catch((res) => {
        console.log(res, 'cuo')
        this.$message.warning('视频文件上传失败')
        this.vStatus = 'exception'
        this.vIsUploading = false
      })
    },
    // 取消上传
    uploadVideoFileCancel() {
      this.vUploader.cancel()
      this.$message.info('视频文件上传已取消')
      this.vStatus = 'active'
      this.vProgress = 0
      this.vIsUploading = false
    },

    // 删除文件地址
    cancelUrl() {
      this.newsVideoUrl = ''
      this.vStatus = 'active'
      this.vProgress = 0
    },
    // 云点播配置上

现在就已经实现了。

关于报错ugc upload | signature has no permission，腾讯云上传视频10003||10013的问题解决：

这个是因为你的这部分，你先console.log(res,'qm')一下。查看你的res值是不是嵌套了一个data，code值是不是在data里面，如果是，那么你的if要写成（res.data.code==='000'），或者你判断的code值不是‘000’，而是200，数字或者字符串注意一下，然后return 的值，也看下是需要res.data

还是需要res.data.data。改完就能解决。

  const getVideoSignature = () => {
        return this.getSignAPI.getSign(this.upload).then(res => { // 获取签名
          console.log(res,'qm')
          if (res.code == '000') {
            return res.data
          }
        }).catch(() => {})
      }