VUE2.0+elementUI+腾讯云点播上传视频

“vue”: “^2.6.11”,

TcVod： “vod-js-sdk-v6”: “^1.7.0”,

“element-ui”: “^2.15.6”,

直接上代码

• 上传视频加上传封面

在这里插入代码片
<template>
    <div>
        <p>上传封面</p>
        <el-upload
            class="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-upload
        class="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>