“vue”: “^2.6.11”,
TcVod： “vod-js-sdk-v6”: “^1.7.0”,
“element-ui”: “^2.15.6”,
直接上代码
- 上传视频加上传封面
在这里插入代码片
<template><div><p>上传封面</p><el-uploadclass="avatar-uploader"action="":auto-upload="false":show-file-list="false":on-change="uploadCover"><img v-if="coverImg" :src="coverImg" class="avatar"/><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload><p>上传视频</p><el-uploadclass="uploadBtn"action="":auto-upload="false":on-change="uploadVideo":show-file-list="false"><el-button type="primary">上传视频</el-button></el-upload><div class="progress" v-if="uploading">上传进度: <el-progress :text-inside="true" status="success" :stroke-width="16" :percentage="progress"></el-progress></div><div v-if="videoUrl">视频地址:<video controls width="250"><source :src="videoUrl" type="" /></video> </div></div>
</template>
在这里插入代码片
<script>
export default {data() {return {coverImg:'',//封面回显file: null, // 选择的文件uploading: false, // 是否正在上传progress: 0, // 上传进度videoUrl: '', // 上传成功后的视频地址fileId:'',//上传后台videoCover:'',//视频封面文件file};},methods: { // 文件选择回调uploadVideo(file) {this.file = file.raw; // 保存选择的文件if(this.file){this.handleUpload(this.file)//上传视频云点播方法}},// 上传视频async handleUpload(file) {let allowedTypes = ['video/mp4', 'video/avi']; // 允许的视频格式let isVideo = allowedTypes.includes(file.type);if (!isVideo) {this.$message.error('只能上传视频文件（格式：mp4, avi）！');return false;}if (!file) {this.$message.warning('请先选择视频文件');return;}this.uploading = true;this.progress = 0;let tcVod =new TcVod.default({getSignature: function(){//签名的函数return '验签码'}});try {let uploader = tcVod.upload({mediaFile: file, // 上传的文件coverFile: this.videoCover,//上传封面});// 监听上传进度uploader.on('media_progress', (info) => {this.progress = Math.floor(info.percent * 100);});// 开始上传let result = await uploader.done();// 上传成功，获取视频地址this.videoUrl = result.video.url;//回显this.fileId = result.fileId; this.$message.success('视频上传成功');} catch (error) {console.error('上传失败:111', error);this.$message.error('视频上传失败');} finally {this.uploading = false;}},// 封面uploadCover(file, type) {this.coverImg = URL.createObjectURL(file.raw);this.videoCover = file.raw;//视频封面使用},},};
</script>
