七牛云上传视屏

npm install qiniu-js

<template>
    <el-upload class="upload-demo" drag action="#" multiple :show-file-list="false" :before-upload="beforeUpload"
        accept=".mp4">
        <el-button style="width:130px;margin-bottom: 20px; padding:10px;">上传视频</el-button>
        <div v-if="goodsFVideo" style=" display: flex; align-items: center; justify-content: center;">
            <video width="320" height="240" controls>
                <source :src="goodsFVideo" type="video/mp4">
            </video>
        </div>
        <div slot="tip" class="el-upload__tip">推荐比例 13.3寸（竖屏），分辨率1920*1080；支持的视频格式：MP4；视频大小不要超过 2GB。</div>

    </el-upload>
</template>
  
<script lang="ts" setup>
import * as qiniu from 'qiniu-js'
import { ref, onMounted } from "vue";
import { ElMessage, ElUpload } from "element-plus";
import { getQnyToken } from "@/api/userCore/qny";

const goodsFVideo = ref<any>()
const props = defineProps({
    vodeoUrl: {
        type: String,
        default: "",

    },

    tip: {
        type: String,
        default:
            "建议图片比例16:9；只能上传jpg/png格式图片；单张图不超过2MB；最多上传三张",
    },
});
const emit = defineEmits(["uploadSuccessEmits"]);
//#endregion
const beforeUpload = (file: any) => {
    if (file.name.split('.')[1].toLowerCase() != 'mp4') {
        ElMessage.error("视频格式错误~");
        return false;   // 终止上传
    } else {
        uploadVideo(file)
    }
}

const uploadData: any = ref({
    token: "", //七牛云token
    key: null,
});

//页面初始化
onMounted(() => {
    getQnyToken().then((res) => {
        uploadData.value.token = res.data;
    });
});


interface configProp {
    useCdnDomain: boolean,
    region: any,    // 根据地区不同，官网有不同的配置
    concurrentRequestLimit: number,
}


const uploadVideo = (file: any) => {
    const suffix = file.name.split('.')[1];  // 后缀名
    const current = new Date().getTime();
    console.log("suffix", suffix)
    console.log("current", current)
    // const key = `video_${current}.${suffix}`;    // key为上传后文件名 必填
    const key = null;    // key：文件资源名，为空字符串时则文件资源名也为空，为 null 或者 undefined 时则自动使用文件的 hash 作为文件名
    const config: configProp = {
        useCdnDomain: true,
        region: qiniu.region.z2,    // 根据地区不同，官网有不同的配置
        concurrentRequestLimit: 1000,
    };
    var observable = qiniu.upload(file, key, uploadData.value.token, undefined, config);  // _this.qiniuToken 由后端提供，通过接口获取
    var observer = {
        next(res: any) {    // 用于展示上传进度
            console.log(" 用于展示上传进度", res.total.percent)
        },
        error(err: any) {
            console.log("上传错误！", err)
        },
        // 上传成功的回调，res中可以拿到七牛云返回的key和hash
        complete(res: any) {
            ElMessage.success("上传成功")
            goodsFVideo.value = `${`https://qny.siboasi-data.com/${res.key}`}`

            emit("uploadSuccessEmits", goodsFVideo.value);

        },
    };
    observable.subscribe(observer);  // 开始上传（赋值给一个全局的参数，可以在合适的时机通过：subscription.unsubscribe() 终止上传）
}

</script>
  
<style scoped lang="scss">
@mixin important-with-heigth {
    width: 96px !important;
    height: 96px !important;
}

.hideUpload {
    :deep(.el-upload.el-upload--picture-card) {
        display: none !important;
    }
}

.avatar-uploader {
    :deep(.el-upload--picture-card) {
        @include important-with-heigth;
    }

    :deep(.el-upload-list--picture-card .el-upload-list__item-thumbnail) {
        @include important-with-heigth;
        line-height: 96px !important;
    }

    :deep(.el-upload-list--picture-card .el-upload-list__item) {
        @include important-with-heigth;
        line-height: 96px !important;
    }
}
</style>

https://blog.csdn.net/jgujgu/article/details/122881519?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-122881519-blog-130623835.235^v38^pc_relevant_sort_base1&spm=1001.2101.3001.4242.2&utm_relevant_index=4