vue 接入 vod-js-sdk-v6.js 完成视频上传

东西有点多，耐心看完。按照操作一步一步来，绝对能成功

首先：npm 引入

npm install vod-js-sdk-v6

mian.js  全局引入 

//腾讯云点播
import TcVod from 'vod-js-sdk-v6'
Vue.prototype.$TcVod = TcVod

其次： vue 文件的引用

<input type="file" accept=".mp4" @change="uploadVideoChanged($event)" />   

注意： 这里 设置 type=“file” 是关键，一定要设置  type="file" ， 然后就是 一定要用 @change 事件 ，event 一定得传，用来获取整个 input 的

下面的可以直接复制粘贴进去了，但是获取签名的方法一定得改成自己的，别瞎抄。

data 参数部分

newsVideoUrl: '',  //视频文件地址
      vFile: {},  //视频文件File对象
      vIsFileExist:false,  //File对象是否存在
      vUploader:{},  //腾讯云上传的初始化对象
      vProgress: 0,  //视频上传进度
      vStatus:'active',  //视频上传状态,string类型： active正在上传，success成功，exception失败
      vIsUploading:false,  //是否正在上传
      signature : '',// 获取签名

这里的 create 用来获取签名

create 部分： 用来获取签名

this.getUploadSignature()

获取签名 的接口请替换成 后端提供的获取签名接口

//获取签名
    getUploadSignature(){
      getUploadSignature().then(res=>{
        this.signature = res.data
      })
    },

    //调用本地文件列表
    //选择视频文件
    uploadVideoChanged(e){
      if(e.currentTarget.files[0].type=='video/mp4'){
        this.vFile = e.currentTarget.files[0]  //获取上传文件中的File对象信息
        this.vIsFileExist=true
      }else{
        this.$message.warning('仅支持mp4格式的视频上传')
      }
    },

    //腾讯云点播上传视频
    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()调用这种方式不会生效也不报错。这是个坑
      let getVideoSignature=()=> {
        return this.signature
      }
      let 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
      }).catch(()=>{
        this.$message.warning('视频文件上传失败')
        this.vStatus='exception'
        this.vIsUploading=false
      })
    },

然后就能获取 文件 id了，最后根据自己的需求去使用这个文件 id

能发现的值得我给你提供一个参考地址，

提别提供： https://www.cnblogs.com/huihuihero/p/13162323.html