腾讯云点播web端视频上传及其注意事项

TDSSS

已于 2022-03-30 16:13:15 修改

阅读量2k

点赞数 2

分类专栏： vue 文章标签：前端 elementui

于 2022-03-30 16:08:45 首次发布

本文链接：https://blog.csdn.net/TDSSS/article/details/123848655

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

问题描述：项目组长让我们研究一下云点播的视频上传是如何实现的，于是我们就买了一个9.9元的新手包进行测试。结果测试了两天依然没办法在web端把视频上传到腾讯云上，查了很多资料还是不行，最后去找客服进行友好的交流~~（对线）~~之后才成功的解决了视频上传的问题

ps：他的官方文档真的容易误导人！

首先贴上官方文档，本文对官方文档进行一些补充和解释云点播客户端上传指引 - 开发指南 - 文档中心 - 腾讯云操作场景客户端视频上传是指App的最终用户将本地视频上传到云点播平台，其流程图如下。本文将为您介绍如何使用客户端上传视频。前提条件1.开通服务开通云点播服务，详细请参见购买指引。https://cloud.tencent.com/document/product/266/9219这里按照官方文档走，一直到服务端签名派发这一步，本文使用的是java，在写完了生成签名的工具类，在Controller层根据响应生成签名，生成签名后放入msg里

如果签名有错或者不确定签名是否正确的，这里贴上两个官方验证签名和生成签名的网址：

生成签名：点播客户端上传-签名生成工具

验证签名：点播客户端上传-签名校验工具

获取签名类如下所示：

@GetMapping("/getSign")
public BaseMessage getUploadSign(){
        BaseMessage msg = new BaseMessage();
        Signature sign = new Signature();
        // 设置 App 的云 API 密钥
        sign.setSecretId("这里填写个人 API 密钥中的 Secret Id");
        sign.setSecretKey("这里填写个人 API 密钥中的 Secret Key");
        sign.setCurrentTime(System.currentTimeMillis() / 1000);
        sign.setRandom(new Random().nextInt(java.lang.Integer.MAX_VALUE));
        sign.setSignValidDuration(3600 * 24 * 2); // 签名有效期：2天

        try {
            String signature = sign.getUploadSignature();
            if (msg != null){
                msg.setMsg(signature);
                msg.setCode(1);
            }
            return msg;

        } catch (Exception e) {
            e.printStackTrace();
            // return JsonResult.fail("获取签名失败");
            msg.setCode(0);
            msg.setMsg("获取签名失败");
            return msg;
        }
    }

！这里一定要注意的是：返回给web端的值只能是签名本身，也就是字符串signature。

在官方文档里的这一句让我误导了很久，真的是泪的教训

web端我使用的是vue+element-ui组件来进行视频上传

template部分：

<template>
  <div class="container">
    <h2 class="handle-title">视频上传中</h2>
    <div class="upload_video" id="upload_video">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="#"
        :http-request="uploadVideo"
        :limit="1"
        :on-remove="handleRemove"
        :on-change="handleChange"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取视频</el-button>
        <el-button style="margin-left: 40px;" 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">建议上传mp4文件，且不超过500M</div>
      </el-upload>
    </div>
  </div>
</template>

script部分：

<script>
  import TcVod from 'vod-js-sdk-v6' //点播云必备的依赖
  import {getSignature} from "../../api/videoAPI/api"; //从后端拿到签名的接口

  export default {
    name: '',
    data() {
      return {
        // 文件列表
        fileList: [],
        // 上传成功后的地址
        videoURL: '',
        // 进度条百分比
        progress: 0,
        // 上传视频获取成功后拿到的fileID【备用】
        fileId: '',
        //云点播签名
        msg: ""
      }
    },
    mounted() {
      let that = this;
      // 获取签名 这里的签名请求是由后端提供的，只需要拿到后端给的签名请求即可
      getSignature().then((res)=>{
        that.msg = res.data.msg
        //console.log(res)
      })
    },
    methods: {
      // 文件列表改变时 将文件列表保存到本地
      handleChange(file, fileList) {
        this.fileList = fileList
      },
      // 点击上传时
      submitUpload() {
        if (this.fileList.length < 1) return this.$alert('请先选取视频，再进行上传', '提示')
        this.uploadVideo()
      },
      // 自定义上传
      uploadVideo(e) {
        let that = this;
        //console.log(this.fileList[0].raw)
        if (this.fileList.length < 1) {
          window.alert('您还没有选取文件')
        } else {
          //必须以函数的形式返回 sdk参数限制
          const getSignature = async () => {
            const data = that.msg;
            //console.log(this.msg)
            return data
          }
          // //console.log(this.msg)
          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.videoURL = doneResult.video.url
          })
        }
      },
      // 点击删除时
      handleRemove(file, fileList) {
        //console.log(file, fileList.length)
      }
    },
  }
</script>

折腾了很久，最后成功上传了，开心