vue 上传腾讯云视频文件等

前提

import TcVod from 'vod-js-sdk-v6'

前台代码

<el-dialog title="课程视频上传" :visible.sync="box" width="50%">
  <div class="upload_video" id="typeContent">
    <el-upload class="upload-demo" ref="upload" action="#" :limit="1" :on-remove="handleRemove"
               :on-exceed="handleExceed"
               :on-change="handleChange"  :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取素材(图片/视频)</el-button>
      <el-button style="margin-left: 10px; margin-bottom: 10px;" size="small" type="success" @click="submitUpload">
        点击上传
      </el-button>
      <el-progress class="progress" :text-inside="true" :stroke-width="18" :percentage="progress"
                   status="exception"></el-progress>
      <div slot="tip" class="el-upload__tip">提示：如果为视频类型,请上传100M以内同内容标清视频</div>
    </el-upload>
  </div>

</el-dialog>

js代码

data() {
  return {
    item:null,
    box:false,
    // 文件列表
    fileList: [],
    // 上传成功后的地址
    videoURL: '',
    // 进度条百分比
    progress: 0,
    // base64图片地址  注：这个是项目需要设置一个默认的视频封面，不需要的忽略就行
    imgBase: '',
    // 上传视频获取成功后拿到的fileID【备用】
    fileId: '',

方法

uploadVides(item){
  this.box=true;
  this.item=item;
},
handleExceed(files, fileList) {
  this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
// 点击删除时
handleRemove() {
  this.videoName = '';
},
// 文件列表改变时  将文件列表保存到本地
handleChange(file, fileList) {
  this.fileList = fileList
},
// 点击上传时
submitUpload() {
  if (this.videoName != null && this.videoName !== '') {
    return this.$message.warning('视频已经上传完成，不可再次上传');
  } else if (this.fileList.length < 1) {
    return this.$message.warning('请先选取视频，再进行上传');
  } else {
    this.uploadVideo()
  }
},
// 自定义上传
uploadVideo() {
  this.videoName = this.fileList[0].raw.name;
  //必须以函数的形式返回  sdk参数限制
  const getSignature = async () => {
    return await this.getVodSignature()
  }
  var sigbn=this.getVodSignature();
  const tcVod = new TcVod({
    getSignature: getSignature // 获取上传签名的函数
  })
  // 获取通过elementui上传到本地的文件  因为参数类型必须为file 不能直接以对象的形式传输
  const mediaFile = this.fileList[0].raw
  const uploader = tcVod.upload({
    mediaFile: mediaFile
  })
  // 监听上传进度
  uploader.on('media_progress', info => {
    this.progress = parseInt(info.percent * 100)
  })
  // 上传结束时，将url存到本地
  uploader.done().then(doneResult => {
    // 保存地址
    this.fileId = doneResult.fileId
    this.item.filePath = doneResult.video.url
    this.item.name=this.videoName;
    this.box=false;
  })
},
// 获取签名  这里的签名请求是由后端提供的，只需要拿到后端给的签名请求即可
getVodSignature() {
  return  courseApi.getUploadSignature({}).then(re => {
    return re;
    })
},