uniapp-微信小程序-上传云点播视频

前言

该文章记录一下自己工作中遇到的问题，后续将会逐步增加，所有内容均从网上整理而来，加上自己得理解做一个整合，方便工作中使用。

需求：微信小程序上传视频到腾讯云点播服务器上

代码

<template>
    <view class="up-video">
        <button
            class="upload"
            v-if="!videoUrl"
            :disabled="props.disabled || loading"
            @click="onChooseVideo"
        >
            <template>
                <i v-if="!loading" class="t-icon t-icon-addvideo" />
                <block v-else>
                    <uni-icons
                        class="runRotate"
                        type="spinner-cycle"
                        size="30"
                    ></uni-icons>
                    <view class="progress" style="line-height: 16px">
                        {{ progress }}%
                    </view>
                </block>
            </template>
        </button>
        <view class="video-box" v-else>
            <video :src="videoUrl" enable-danmu danmu-btn controls></video>
            <i class="t-icon t-icon-close2" @click="onDelVideo()" />
        </view>
    </view>
</template>


<script setup>
import { ref, computed, toRaw } from 'vue';
import { reqUpload } from '@/api/common';
import VodUploader from 'vod-wx-sdk-v2';

const videoFile = ref(null);
const uploader = ref(null);
const progress = ref(0);
const videoUrl = ref('');
const loading = ref(false);


//选择视频-将整个返回结果保存。
function onChooseVideo() {
    uni.chooseVideo({
        sourceType: ['camera', 'album'],
        success: function (res) {
            videoFile.value = res;
            startUpload();
        }
    });
}

//如果是要上传封面-将整个返回结果保存。
function onChooseCover() {
    uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
            coverFile.value = res;
        },
        fail: (err) => {
            console.error('选择图片失败:', err);
        }
    });
}

//获取云点播的签名
function getSignature(callback) {
    uni.request({
        url: 'https://xxx',
        method: 'POST',
        header: {
            token: uni.getStorageSync('token')
        },
        data: {
            Action: 'GetUgcUploadSign'
        },
        dataType: 'json',
        success: function (res) {
            if (res.data && res.data.data) {
                callback(res.data.data);
            } else {
                return '获取签名失败';
            }
        }
    });
}
//开始上传
function startUpload() {
    loading.value = true;
    let uploaderSon = VodUploader.start({
        getSignature: getSignature,
        mediaFile: videoFile.value,
        mediaName: fileName.value,
        coverFile: coverFile.value,
        // 上传中回调，获取上传进度等信息
        progress: function (result) {
            progress.value = Math.floor(result.percent * 100);
        },
        // 上传完成回调，获取上传后的视频 URL 等信息
        finish: function (result) {
            videoUrl.value = result.videoUrl;
            emit('complete', result.videoUrl);
            loading.value = false;
            progress.value = 0;
        },
        // 上传错误回调，处理异常
        error: function (result) {
            console.log('error');
            console.log(result);
            loading.value = false;
        }
    });
    uploader.value = uploaderSon;
}
//删除
function onDelVideo() {
    
}
</script>