Problem Description: the project leader asked us to study how the video upload of cloud on demand was realized, so we bought a 9.9 yuan novice bag for testing. It was only two days after the video was uploaded to Tencent that the customer service was still unable to solve the problem. In the end, the video was uploaded to Tencent's customer service line and there was no way to solve the problem

ps: his official documents are really misleading!

First, paste the official documents. This paper makes some supplements and explanations to the official documents Cloud on demand client upload Guide - Development Guide - Document Center - Tencent cloud operation scenario client video upload refers to the end user of App uploading local video to the cloud on demand platform. Its flow chart is as follows. This article will show you how to upload videos using the client. Precondition 1 Open service open cloud on demand service, please refer to the purchase guide for details.https://cloud.tencent.com/document/product/266/9219 Here, follow the official documents until the signing and distribution of the server. This paper uses java. After writing the tool class for generating the signature, the Controller layer generates the signature according to the response, and then puts the signature into msg

Get the signature class as follows:

@GetMapping("/getSign")
public BaseMessage getUploadSign(){
        BaseMessage msg = new BaseMessage();
        Signature sign = new Signature();
        // Set the cloud API key of App
        sign.setSecretId("Fill in individual here API In key Secret Id");
        sign.setSecretKey("Fill in individual here API In key Secret Key");
        sign.setCurrentTime(System.currentTimeMillis() / 1000);
        sign.setRandom(new Random().nextInt(java.lang.Integer.MAX_VALUE));
        sign.setSignValidDuration(3600 * 24 * 2); // Validity period of signature: 2 days

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

        } catch (Exception e) {
            e.printStackTrace();
            // return JsonResult.fail("failed to obtain signature");
            msg.setCode(0);
            msg.setMsg("Failed to get signature");
            return msg;
        }
    }

! It must be noted here that the value returned to the web side can only be the signature itself, that is, the string signature.

This sentence in the official document misled me for a long time. It's really a tearful lesson

On the web side, I use Vue + element UI component to upload videos

template section:

<template>
  <div class="container">
    <h2 class="handle-title">Video uploading</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">Select video</el-button>
        <el-button style="margin-left: 40px;" size="small" type="success" @click="submitUpload">Click upload</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">Recommended upload mp4 Documents, and no more than 500 M</div>
      </el-upload>
    </div>
  </div>
</template>

script part:

<script>
  import TcVod from 'vod-js-sdk-v6' //Cloud on demand essential
  import {getSignature} from "../../api/videoAPI/api"; //Get the signed interface from the back end

  export default {
    name: '',
    data() {
      return {
        // File list
        fileList: [],
        // Address after successful upload
        videoURL: '',
        // Progress bar percentage
        progress: 0,
        // fileID obtained after successfully uploading video [standby]
        fileId: '',
        //Cloud on demand signature
        msg: ""
      }
    },
    mounted() {
      let that = this;
      // Get signature. The signature request here is provided by the back end. You only need to get the signature request from the back end
      getSignature().then((res)=>{
        that.msg = res.data.msg
        //console.log(res)
      })
    },
    methods: {
      // Save the file list locally when the file list changes
      handleChange(file, fileList) {
        this.fileList = fileList
      },
      // When clicking upload
      submitUpload() {
        if (this.fileList.length < 1) return this.$alert('Please select the video before uploading', 'Tips')
        this.uploadVideo()
      },
      // Custom upload
      uploadVideo(e) {
        let that = this;
        //console.log(this.fileList[0].raw)
        if (this.fileList.length < 1) {
          window.alert('You have not selected a file yet')
        } else {
          //The sdk parameter limit must be returned as a function
          const getSignature = async () => {
            const data = that.msg;
            //console.log(this.msg)
            return data
          }
          // //console.log(this.msg)
          const tcVod = new TcVod({
            getSignature: getSignature // Function to get upload signature
          })
          // Get the file uploaded to the local through elementui, because the parameter type must be file and cannot be transmitted directly in the form of object
          const mediaFile = this.fileList[0].raw
          const uploader = tcVod.upload({
            mediaFile: mediaFile
          })
          // Monitor upload progress
          uploader.on('media_progress', info => {
            this.progress = parseInt(info.percent * 100)
          })
          // At the end of uploading, save the url locally
          uploader.done().then(doneResult => {
            this.fileId = doneResult.fileId
            this.videoURL = doneResult.video.url
          })
        }
      },
      // When clicking delete
      handleRemove(file, fileList) {
        //console.log(file, fileList.length)
      }
    },
  }
</script>

Tossed for a long time, finally successfully uploaded, happy