问题描述：项目组长让我们研究一下云点播的视频上传是如何实现的，于是我们就买了一个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组件来进行视频上传文章来源：https://www.toymoban.com/news/detail-403644.html
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>折腾了很久，最后成功上传了，开心文章来源地址https://www.toymoban.com/news/detail-403644.html
到了这里，关于腾讯云点播web端视频上传及其注意事项的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
