Vue+Element Plus实现通过腾讯云点播Web端上传SDK上传视频demo

一、背景概述

在企业里很多的网站系统开发都会需要实现用到视频上传的功能，所以这里借助腾讯云点播Web端上传SDK实现简单的视频上传的demo。

开发准备

1、搭建一个vue项目；
2、项目里安装sdk插件vod-js-sdk-v6

#npm install vod-js-sdk-v6

开发步骤

1、引入vod-js-sdk-v6

// npm install vod-js-sdk-v6 之后，在页面中直接 import 引入
import TcVod from 'vod-js-sdk-v6'

2、定义获取上传签名的函数（由后端提供获取上传签名接口）

// 普通函数写法
function getSignature() {
  return axios.post(url).then(function (response) {
    return response.data.signature;
  })
};
// 箭头函数写法
const getSignature = () => {
	return axios.post(url).then(function (response) {
    	return response.data.signature;
  	})
}

3、通过SDK实现上传

// 创建上传实例
const tcVod = new TcVod({
    getSignature: getSignature, // 前文中所述的获取上传签名的函数
});

// console.log("开始上传");
uploader.on("media_progress", function (info) {
	console.log("进度", info); // 进度
});

// 视频上传完成时
uploader.on("media_upload", function (info) {
    console.log("上传成功", info); // 进度
});

// 上传完成回调
uploader
    .done()
    .then(function (doneResult) {
      	console.log("视频地址：", doneResult.video.url);
    })
    .catch(function (err) {
      	console.log(err);
    });

demo源码

<template>
	<div id="">
		<input type="file" name="" @change="fole" id="input1" value="" />
		<br/>
		<button @click="cancel">取消</button>
	</div>
</template>

<script>
import {
	ref,
	onBeforeMount,
	onMounted,
	onBeforeUpdate,
	onUpdated,
	onBeforeUnmount,
	onUnmounted,
	onErrorCaptured,
	reactive
} from 'vue';
import TcVod from 'vod-js-sdk-v6'

export default {
	setup() {
		let progress = ref('');
		let status = ref('');
		let typeArr = ['png', 'jpg', 'bmp', 'pbm'];
		let imgDom = '';

		const cancel = () => {};

		const getSignature = () => {
			return axios.post(url).then(function(response) {
		 		return response.data.signature;
			})
		};
		
		const fole = () => {
			let input1 = document.getElementById('input1')
			// let coverFile = document.getElementById('coverFile')
			if (input1.length == 0) {
				console.error('请上传视频')
			} else if (getSignature() == '') {
				console.error('请添加正确的上传签名')
			}
			const tcVod = new TcVod({
				getSignature: getSignature // 前文中所述的获取上传签名的函数
			})
			const uploader = tcVod.upload({
				mediaFile: input1.files[0], // 媒体文件（视频或音频或图片），类型为 File
				// coverFile: coverFile.files[0]
			})
			console.log('开始上传')
			uploader.on('media_progress', function(info) {
				console.log('进度', info.percent) // 进度
			})
		
			// 视频上传完成时
			uploader.on('media_upload', function(info) {
				console.log('上传成功', info) // 进度
			})
			
			uploader
				.done()
				.then(function(doneResult) {
					// deal with doneResult
					console.log(doneResult)
				})
				.catch(function(err) {
					// deal with error
					console.log(err)
				});
		}

		onMounted(() => {});
		return {
			progress,
			status,
			getSignature,
			fole,
			cancel
		};
	}
};
</script>

更多腾讯云点播上传相关：Web 端上传 SDK