vue3实现上传视频后，根据视频自动生成封面图

最新推荐文章于 2025-08-11 19:52:03 发布
原创 最新推荐文章于 2025-08-11 19:52:03 发布 · 130 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #前端

1、数据表格

<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header" ref="searchBox">
                <el-form :inline="true" :model="form" class="demo-form-inline" ref="ruleFormRef" size="small">
                    <el-form-item label="视频名称" prop="VideoName">
                        <el-input v-model="form.VideoName" placeholder="请输入要查询的视频名称" />
                    </el-form-item>
                    <!-- <el-form-item label="视频分类编码" prop="videoTypeCode">
                        <el-tree-select :props="{ value: 'bianMa', label: 'mingCheng', children: 'children' }"
                            v-model="form.VideoTypeCode" :data="videoTypeCodetreedata" check-strictly filterable />
                    </el-form-item> -->
                    <el-form-item>
                        <el-button size="small" type="primary" @click="onSubmit(ruleFormRef)">
                            <el-icon>
                                <search />
                            </el-icon>查询
                        </el-button>
                        <el-button size="small" @click="resetForm(ruleFormRef)">
                            <el-icon>
                                <refresh-right />
                            </el-icon>重置
                        </el-button>
                        <el-button size="small" type="primary" @click="add">新增</el-button>
                        <!-- <el-popconfirm title="确认要进行批量删除吗?" @confirm="Del" confirm-button-text="是" cancel-button-text="否">
                            <template #reference>
                                <el-button type="danger">删除</el-button>
                            </template>
                        </el-popconfirm> -->
                    </el-form-item>
                </el-form>
                <!-- <p>
                    <el-button type="primary" @click="add">新增</el-button>
                    <el-popconfirm title="确认要进行批量删除吗?" @confirm="Del" confirm-button-text="是" cancel-button-text="否">
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </p> -->
            </div>
        </template>
        <el-row>
            <el-col :span="3">
                <el-tree :props="defaultProps" :load="loadNode" :expand-on-click-node="false"
                    @node-click="handleNodeClick" lazy />
            </el-col>
            <el-col :span="21">
                      <el-table :data="tableData" size="small"  :style="{height:contentHeight}" style="width: 100%;" ref="multipleTableRef">
                    <!-- <el-table-column type="selection" width="55" /> -->
                    <el-table-column label="序号" type="index" :index="indexMethod" width="70">
			</el-table-column>

                    <el-table-column label="文件名称" v-if="permission.tableList.findIndex((v) => (v === '文件名称')) < 0">
                        <template #default="scope">
                            <div>{{ scope.row.videoName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="点击次数" v-if="permission.tableList.findIndex((v) => (v === '点击次数')) < 0" width="100">
                        <template #default="scope">
                            <div>{{ scope.row.playbackCount }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="分类" v-if="permission.tableList.findIndex((v) => (v === '分类')) < 0" width="180">
                        <template #default="scope">
                            <div>{{ scope.row.videoType }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="视频封面" v-if="permission.tableList.findIndex((v) => (v === '视频封面')) < 0" width="120">
                        <template #default="scope">
                            <div class="demo-image__preview" v-if="scope.row.videoCover">
                                <el-image
                                style="width: 100px; height: 50px"
                                :src="DownloadImgServerUrl + scope.row.videoCover"
                                :zoom-rate="1.2"
                                :max-scale="7"
                                :min-scale="0.2"
                                :preview-src-list="[DownloadImgServerUrl + scope.row.videoCover]"
                                show-progress
                                :initial-index="4"
                                fit="cover"
                                preview-teleported="true"
                                />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="查看视频" v-if="permission.tableList.findIndex((v) => (v === '查看视频')) < 0" width="120">
                        <template #default="scope">
                            <div style="color:blue;cursor:pointer;" @click="toShipin(scope.row)">点击查看</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" width="170" v-if="permission.tableList.findIndex((v) => (v === '创建时间')) < 0">
                        <template #default="scope">
                            <div>{{ scope.row.createTime }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column label="创建人" v-if="permission.tableList.findIndex((v) => (v === '创建人')) < 0" width="100">
                        <template #default="scope">
                            <div>{{ scope.row.createUser }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="修改时间" width="170" v-if="permission.tableList.findIndex((v) => (v === '修改时间')) < 0">
                        <template #default="scope">
                            <div>{{ scope.row.updateTime }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column label="修改人" v-if="permission.tableList.findIndex((v) => (v === '修改人')) < 0" width="100">
                        <template #default="scope">
                            <div>{{ scope.row.updateUser }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="right" width="200">
                        <template #default="scope">
                            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)" v-if="permission.listButton.findIndex((v) => (v === '编辑')) < 0">编辑
                            </el-button>
                            <el-popconfirm title="确定要删除吗?" @confirm="handleDelete(scope.$index, scope.row)"
                                confirm-button-text="是" cancel-button-text="否" v-if="permission.listButton.findIndex((v) => (v === '删除')) < 0">
                                <template #reference>
                                    <el-button size="small" type="danger">删除
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                
<el-pagination  :total="form.Total" small
            @current-change="handleCurrentChange"             
            v-model:current-page="form.pageIndex"
      v-model:page-size="form.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      background
      right
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      />
            </el-col>
        </el-row>
    </el-card>
    <addVue :addVisible="addVisible" :info="info" @CloseAdd="CloseAdd"></addVue>
    <el-drawer v-model="drawer" title="查看视频" @closed="closevideo">
        <!-- <vue3VideoPlay v-bind="options" poster="../../../assets/logo.png" /> -->
        <video controls ref="videoRef" style="position:relative;width:100%;height: 100%;"
                                :src="DownloadImgServerUrl + options.src">
                                <!-- <source :src="form.videoUrl" type="video/mp4">
                                            <source :src="form.videoUrl" type="video/ogg">
                                            <source :src="form.videoUrl" type="video/webm">
                                            很抱歉，您的浏览器暂时不支持播放组件，请尝试替换浏览器！ -->
                            </video>
    </el-drawer>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, toRaw } from 'vue'
import type { ElTable } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Search, Phone, RefreshRight } from '@element-plus/icons-vue'
import addVue from './components/add.vue'
import { VideoCenterModel } from '../VideoCenter/class/VideoCenterModel'
import { delRole, batchDelRole } from '../../../http/index'
import { GetData, TongYongGet } from '../../../http/tongyong'
import { getListByCode } from '../../../http/zidian'
import { ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import Tool from '../../../global'
const DownloadImgServerUrl = new Tool().DownloadImgServerUrl.toString();
interface Tree {
    id: number
    mingCheng: string
    children?: Tree[]
}
const defaultProps = {
    children: 'children',
    label: 'name',
    id: 'id',
}
//树状图节点点击事件
function handleNodeClick(data: any) {
    // console.log(data)
    form.VideoTypeCode = data.typeCode;
    LoadTableData()
}
const handleSizeChange = (val: number) => {
    form.pageSize=val
    LoadTableData()
}
let dicp_parent = {
    Name: "",
    PageIndex: 1,
    PageSize: 999
}

const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
    if (node.level === 0) {
        dicp_parent.Name=""
        loadTree(resolve, dicp_parent)
    } else if (node.level >= 1) {
        dicp_parent.Name="das789ah32490ads@#$"
        loadTree(resolve, dicp_parent)
    }
}
const loadTree = async (resolve: any, get_fileTypeCode: any) => {
    let data = (await GetData(get_fileTypeCode, "/VideoType/GetList") as any).data;
    if (data.length > 0) {
        resolve(data);
    } else {
        resolve([]);
    }
}

const closevideo = () => {

    options.src = ''
}

//视频播放开始
let drawer = ref(false)
//视频组件
const options = reactive({
    width: '100%', //播放器高度
    height: '100%', //播放器高度
    color: '#409eff', //主题色
    title: '', //视频名称
    src: '', //视频源
    muted: true, //静音
    webFullScreen: false,
    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
    autoPlay: true, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制器
});

const showsp = ref({ id: 0 })

const toShipin = (row: any) => {

    showsp.value.id = row.id
    options.src = row.videoUrl

    var parms = {
        VideoCenterId: row.id,
        LogType: 0,
        Title: row.videoName
    }

    if (row.videoUrl != '') {
        const res = GetData(parms, "/VideoViewRecord/Add") as any as boolean
    }
    drawer.value = true
}
//视频播放结束
const ruleFormRef = ref<FormInstance>()
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const form = reactive({
    VideoTypeCode: "",
    VideoName: "",
    pageIndex: 1,
    pageSize: 50,
    Total: 0
})

const searchBox=ref()
const contentHeight=ref()
onMounted(async () => {
    
    setTimeout( () =>{
        const a = document.body.clientHeight
        // const a = document.documentElement.clientHeight
        const b=searchBox.value.offsetHeight + 36;
        //屏幕高度 - 查询- 第一个横向 - 选项卡 -分页
        const c=a - b - 120 -70; 
        contentHeight.value=c.toString()+'px'
    },500)
    LoadTableData()
    // Init()
})
//权限屏蔽内容列表
const permission = ref({
    queryItem: [''],//查询项 id=2
    topButton: [''],//全局按钮 id=3
    tableList: [''],//表格列 id=4
    listButton: [''],//操作项 id=5
    formItem: [''],//表单项 id=6
    formButton: ['']//表单按钮 id=7
})

const indexMethod = (index: number) => {
  return (form.pageIndex-1)*form.pageSize+index+1
}
//根据需求，获取权限列表
const LoadPermissions = async () => {
    let parms = {
        Url: window.location.hash.replace('#', ''),
        Ids: [2, 3, 4, 5]
    }
    let res = await GetData(parms, "/MenuFunctionInfo/GetFuncsByUrl") as any
    permission.value = res
    // showPage.value = true
}
const videoTypeCodetreedata = ref()
let dicp_videoTypeCode = {
    MingCheng: "",
    BianMa: "",
    QiTaCanShu: "",
    FuJiId: 0,
    Description: "",
    PageIndex: 1,
    FuJiCode: 'SHIPINFENLEI',
    PageSize: 999
}

// const Init = async () => {
//     videoTypeCodetreedata.value = [{ bianMa: '', mingCheng: '全部视频分类编码' }]
//     videoTypeCodetreedata.value = videoTypeCodetreedata.value.concat((await getListByCode(dicp_videoTypeCode)).data)
// }

//表格
const tableData = ref<Array<VideoCenterModel>>()

const LoadTableData = async (name: string = "") => {
    let parms = {
        VideoTypeCode: form.VideoTypeCode,
        VideoName: form.VideoName,
        PageIndex: form.pageIndex,
        PageSize: form.pageSize
    }
    let res = await GetData(parms, "/VideoCenter/GetList") as any
    form.Total = res.total
    tableData.value = res.data as VideoCenterModel[]

}
//分页
const handleCurrentChange = (val: number) => {
    form.pageIndex = val
    LoadTableData()
}

const onSubmit = async (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid, fields) => {
        if (valid) {
            form.VideoTypeCode = "";
            LoadTableData()
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    ruleFormRef.resetFields()
    LoadTableData()
}

const handleQuery = (index: number, row: VideoCenterModel) => {
    
    queryDialog.value = true
}
const addVisible = ref(false)
const add = () => {
    addVisible.value = true
}
const CloseAdd = () => {
    addVisible.value = false
    info.value = undefined
    LoadTableData()
}

const info = ref()
const handleEdit = (index: number, row: VideoCenterModel) => {
    info.value = JSON.stringify(row)
    addVisible.value = true
}
//单个删除
const handleDelete = async (index: number, row: VideoCenterModel) => {
    tableData.value = tableData.value?.filter(s => s.id != row.id)
    const res = await TongYongGet("/VideoCenter/Del?id=" + row.id) as any as boolean
    if (res) {
        ElMessage({
            message: '删除成功！',
            type: 'success',
        })
    }
}
//批量删除
const Del = async () => {
    let arr: any[] = multipleTableRef.value?.getSelectionRows()
    let ids: string = arr.map(item => { return "'" + item.id + "'" }).join(',')
    const res = await TongYongGet("/VideoCenter/BatchDel?ids=" + ids) as any as boolean
    if (res) {
        ElMessage({
            message: '删除成功！',
            type: 'success',
        })
        LoadTableData()
    }
}
const queryDialog = ref(false)
const queryDialogClose = () => {
    queryDialog.value = false;
}

</script>
<style  lang="scss" scoped>
.el-pagination {
    margin-top: 50px;
}

.cell {
    text-align: center !important;
}

.queryTable {
    width: 500px;
    border-collapse: collapse;

    tr {
        height: 50px;

        td {
            padding: 10px;
        }

        .left {
            width: 30%;
            background-color: #F5F7FA;
        }

        .right {
            width: 80%;
        }
    }
}

.imageVideo {
    width: 100%;
    max-height: 200px;
    height: 200px;
}
</style>

2、新增页面

<template>
    <el-dialog v-model="addVisible" :title="info == undefined ? '新增' : '修改'" width="70%" :before-close="handleClose">
        <el-form :model="form" label-width="170px" class="form" :rules="rules" ref="ruleFormRef" size="small">
            <el-row>
                <el-col :span="20">
                    <el-form-item label="视频名称" prop="videoName">
                        <el-input v-model="form.videoName" />
                    </el-form-item>
                </el-col>
                <el-col :span="20">
                    <el-form-item label="视频分类" prop="videoTypeCode">
                        <el-tree-select :props="{ value: 'typeCode', label: 'name', children: 'children' }"
                            v-model="form.videoTypeCode" :data="videoTypeCodetreedata" check-strictly filterable />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="20">
                    <el-form-item label="封面图" prop="videoCover">
                        <el-upload class="avatar-uploader" :action="UploadImgServerUrl" :show-file-list="false" accept=".png,.jpg,.jpeg,.gif,.bmp,.svg"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="form.videoCover" :src="DownloadImgServerUrl + form.videoCover" class="avatar" style="max-width:200px" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col> -->
                <el-col :span="20">
                    <el-form-item label="视频文件" prop="videoUrl">
                        <el-upload v-model:file-list="fileList" class="upload-demo" :action="UploadImgServerUrl" accept=".mp4,.avi,.mov,.wmv"
                            :on-change="handleChange" :on-remove="removeFile" multiple="false" limit="1">
                            <el-button type="primary">请选择要上传的视频文件</el-button>
                        </el-upload>
                    </el-form-item>
                </el-col>
                
                <el-col :span="20">
                    <el-form-item label="上传视频生成封面图" prop="videoCover">
                        <div>
                            <div v-show="false">
                                <video ref="video" :src="DownloadImgServerUrl + form.videoUrl" @loadeddata="captureFrame" crossorigin="anonymous" style="width: 100%;height: 200px;"></video>
                            </div>
                            <canvas ref="canvas" style="display:none;" v-show="false"></canvas>
                            <img :src="thumbnail" v-if="thumbnail">
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="20">
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model="form.sort" type="number" />
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 按钮操作组 -->
            <el-form-item class="btn">
                <el-button size="small" type="primary" @click="submit(ruleFormRef)">确定</el-button>
                <el-button size="small" @click="close(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, computed, defineEmits, onMounted, watch, toRaw } from 'vue'
import { addMenu, editMenu, getMenuDataNew } from '../../../../http';
import { VideoCenterModel } from '../../VideoCenter/class/VideoCenterModel'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { getListByCode } from '../../../../http/zidian'
import { base64ToFile, GetData } from '../../../../http/tongyong'
import { number } from 'echarts';
import type { UploadProps, UploadUserFile } from 'element-plus'
import Tool from '../../../../global'
import { Plus } from '@element-plus/icons-vue'

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from 'axios';

// const uploadFileAction = new Tool().UploadFileServerUrl
const UploadImgServerUrl = new Tool().UploadImgServerUrl
const DownloadImgServerUrl = new Tool().DownloadImgServerUrl
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    console.log("上传文件：" + rawFile);
    // if (rawFile.type !== 'image/jpeg') {
    //     ElMessage.error('请上传jpg头像!')
    //     return false
    // } else 
    if (rawFile.size / 1024 / 1024 > 200) {
        ElMessage.error('文件大小不要超200MB哦!')
        return false
    }
    return true
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
        form.value.videoCover = response.result;
}

const fileList = ref<UploadUserFile[]>([
    //   {
    //     name: 'food.jpeg',
    //     url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    //   },
    //   {
    //     name: 'food2.jpeg',
    //     url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    //   },
])

const getSort = async () => {
    var parms = {
    }

    const res = await GetData(parms, "/VideoCenter/getSort") as any as number
        if (res) {
            form.value.sort=res
        }

}

const removeFile=()=>{
    form.value.videoUrl = ''
        form.value.oldVideoFileName = ''
        fileList.value = []
  
}

const handleChange: UploadProps['onChange'] = (uploadFile: any, uploadFiles) => {
    // fileList.value = []
    if (uploadFile.response && uploadFile.response.isSuccess) {
        form.value.videoCover = "";
        // let data = uploadFile.response.result.data
        // console.log("后缀名：" + data.fileExt);
        // console.log("文件大小" + data.filesize);
        // console.log("文件MD5值" + data.mD5);
        // console.log("新文件名字" + data.newname);
        // console.log("旧文件名字" + data.oldname);
        // console.log("硬盘地址" + data.relativePath);
        // console.log("网络地址" + data.url);
        form.value.videoUrl = uploadFile.response.result;
        form.value.oldVideoFileName = uploadFile.name
        captureFrame()
    }
}

const ruleFormRef = ref<FormInstance>()
const props = defineProps({
    addVisible: Boolean,
    info: VideoCenterModel
})
const form = ref({
    id: props.info?.id,
    sort: 0,
    videoTypeCode: '',
    oldVideoFileName: '',
    videoName: '',
    videoUrl: '',
    videoCover: ''
})
const rules = reactive<FormRules>({
    videoName: [{ required: true, message: '请输入视频名称', trigger: 'blur' }],
    videoTypeCode: [{ required: true, message: '请选择视频分类', trigger: 'blur' }],
    videoUrl: [{ required: true, message: '请上传视频', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
})

//监听
watch(
    () => props.info,
    (newInfo, oldInfo) => {
        if (newInfo != undefined) {
            let currInfo: VideoCenterModel = (JSON.parse(newInfo as any)) as VideoCenterModel
            form.value = {
                id: currInfo.id,
                sort: currInfo.sort,
                videoTypeCode: currInfo.videoTypeCode,
                videoName: currInfo.videoName,
                videoUrl: currInfo.videoUrl,
                oldVideoFileName: currInfo.oldVideoFileName,
                videoCover: currInfo.oldVideoFileName
            }
            if (currInfo.videoUrl != '') {
                fileList.value = [{
                    name: currInfo.oldVideoFileName,
                    url: currInfo.videoUrl,
                }]
            }


        } else {
            form.value = {
                id: 0,
                sort: 0,
                videoTypeCode: '',
                oldVideoFileName: '',
                videoName: '',
                videoUrl: '',
                videoCover: ''
            }

            fileList.value = []
            getSort()
        }
    }
);
//defineEmits用于定义回调事件，里面是数组，可以定义多个事件
const emits = defineEmits(["CloseAdd"])
const handleClose = (done: () => void) => {
    emits("CloseAdd")
}


const videoTypeCodetreedata = ref()
let dicp_videoTypeCode = {
    MingCheng: "",
    BianMa: "",
    QiTaCanShu: "",
    FuJiId: 0,
    Description: "",
    PageIndex: 1,
    FuJiCode: 'SHIPINFENLEI',
    PageSize: 999
}


const xingbietreedata = ref()
const shifoutreedata = ref()

onMounted(() => {
    getSort()
    LoadSelectData()
})


let dicp_parent = {
    Name: "",
    PageIndex: 1,
    PageSize: 999
}

const LoadSelectData = async () => {

    videoTypeCodetreedata.value = [{ typeCode: '', name: '请选择分类' }]
    const gsres = await GetData(dicp_parent, "/VideoType/GetList") as any
    videoTypeCodetreedata.value = videoTypeCodetreedata.value.concat(gsres.data)

    xingbietreedata.value = [{ bianMa: 0, mingCheng: '女' }, { bianMa: 1, mingCheng: '男' }]
    shifoutreedata.value = [{ bianMa: 0, mingCheng: '否' }, { bianMa: 1, mingCheng: '是' }]

}

const submit = async (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    if (form.value.videoUrl == '') {
        ElMessage({
            message: '请上传视频文件',
            type: 'error',
        })
        return
    }

    ruleFormRef.validate((valid) => {
        if (valid) {
            addOrEdit(ruleFormRef)
            // 
        } else {
            ElMessage({
                message: '请填写完整信息！',
                type: 'warning',
            })
        }
    });
}

const addOrEdit = async (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return

    var parms = {
        Id: form.value.id,
        Sort: form.value.sort,
        VideoTypeCode: form.value.videoTypeCode,
        VideoName: form.value.videoName,
        VideoUrl: form.value.videoUrl,
        OldVideoFileName: form.value.oldVideoFileName,
        VideoCover: form.value.videoCover
    }

    if (props.info == undefined) {
        // 执行添加逻辑 
        const res = await GetData(parms, "/VideoCenter/Add") as any as boolean
        if (res) {
            ElMessage({
                message: '添加成功！',
                type: 'success',
            })
            //添加菜单之后重新加载下拉框
            LoadSelectData()
            ruleFormRef.resetFields()
            getSort()
            emits("CloseAdd")
        }
    } else {
        // 执行修改逻辑
        const res = await GetData(parms, "/VideoCenter/Edit") as any as boolean
        if (res) {
            ElMessage({
                message: '编辑成功！',
                type: 'success',
            })
            //添加菜单之后重新加载下拉框
            LoadSelectData()
            ruleFormRef.resetFields()
            emits("CloseAdd")
        }
    }

}
const close = (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    ruleFormRef.resetFields()
    emits("CloseAdd")
}

//生成封面图
const video = ref<HTMLVideoElement | null>(null);
const canvas = ref<HTMLCanvasElement | null>(null);
const thumbnail = ref<string>('');
const captureFrame =async () => {
    if(form.value.videoUrl && !form.value.videoCover){
        const videoref = video.value;
        const canvasref =canvas.value;
        const context = canvasref!.getContext('2d');
        canvasref!.width = videoref!.videoWidth;
        canvasref!.height = videoref!.videoHeight;
        context!.drawImage(videoref!, 0, 0, canvasref!.width, canvasref!.height);
        thumbnail.value = canvasref!.toDataURL('image/png');
    // console.log(thumbnail.value,"生成封面图");
        //将base64转换为文件
        
        var  NewImg = base64ToFile(thumbnail.value);
        try{
        const formData = new FormData();
        formData.append('file', NewImg);
        const response = await axios.post(UploadImgServerUrl.toString(), formData,{headers:{'Content-Type': 'multipart/form-data'}});
            if(response.data.isSuccess){
                // ElMessage({
                //     message: '上传成功！',
                //     type: 'success',
                // })
                var newtu = response.data.result;
                form.value.videoCover = newtu;
            }else{
                ElMessage({
                    message: '上传失败，请联系系统管理员！',
                    type: 'error',
                })
            }
        }catch(err){
            ElMessage({
                message: '上传失败，请联系系统管理员！',
                type: 'error',
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.form {
    min-height: 500px;

    .btn {
        position: absolute;
        bottom: 10px;
    }
}
</style>

3、base64图片信息转为文件类型

//将base64转换为文件
export const base64ToFile=(data:any)=> {
    // 将base64 的图片转换成file对象上传 atob将ascii码解析成binary数据
    let binary = atob(data.split(',')[1]);
    let mime = data.split(',')[0].match(/:(.*?);/)[1];
    let array: number[] = [];
    for (let i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    let fileData = new Blob([new Uint8Array(array)], {
        type: mime,
    });
    let file = new File([fileData], `${new Date().getTime()}.png`, {
        type: mime
    });
    return file;

}

vue3 - 最新详细实现上传视频后智能截取多张封面图功能教程，视频上传截取多帧画面并生成jpg/png图片展示和供用户选取，vue如何截取获取视频画面任意一帧、第一帧、几帧（当做视频封面，详细代码
高级前端工程师
07-18 4015
vue3，nuxt3，视频截取，封面截取，实现视频上传截取多帧画面，vue3截取视频的部分画面，截取视频帧，任意一帧，获取任意视频时长和视频任意时间动画帧，上传视频获取视频第一帧做为封面，vue上传视频并且截取视频图片，截取当前播放的任意一帧视频为图片，截取第几帧做为视频封面，Vue3实现在视频中截取某一帧_vue视频怎么截取部分画面，视频截图获取第一帧或者某一帧，视频根据时间轴截取，上传视频之后截取画面，捕获截图，截取第几帧做为视频封面，上传视频截取默认图片，截取video视频中的某一帧，上传视频到腾讯云
vue2 - 最新详细实现上传视频后智能截取多张封面图功能教程，视频上传截取多帧画面并生成jpg/png图片展示和供用户选取，vue如何截取获取视频画面任意一帧、第一帧、几帧（当做视频封面，详细代码
高级前端工程师
07-19 2224
vue2，nuxt2，视频截取，封面截取，实现视频上传截取多帧画面，Vue实现在视频中截取某一帧_vue视频怎么截取部分画面，视频截图获取第一帧或者某一帧，视频根据时间轴截取，上传视频之后截取画面，捕获截图，截取第几帧做为视频封面，上传视频截取默认图片，截取video视频中的某一帧，上传视频到腾讯云存储并获取视频第一帧，vue截取视频的部分画面，截取视频帧，任意一帧，获取任意视频时长和视频任意时间动画帧，上传视频获取视频第一帧做为封面，vue上传视频并且截取视频图片，截取当前播放的任意一帧视频为图片，截取第
vue antd上传视频或图片到阿里云 oss
lfeishumomol的博客
06-24 1508
vue antd上传视频或图片到阿里云 oss,### 2.统一分片上传 因为视频需要分片上传,所以就统一为分片上传了 client(tamp) 创建oss实例,multipartUpload 分片上传 progress 监听进度条并取整, 当成功时返回上传到oss的路径,以及文件的类型 首先需要一个上传文件的组件a-upload，一个进度条, 在beforeUpload中对文件进行文件类型的检测,在customRequest上传文件到阿里云 oss ## 1.beforeUpload对文件类型进
javacv实现上传视频后自动保存封面缩略图（视频第一帧）
lianzhang861的博客
08-24 9386
首先，使用场景： 现在视频网站展示列表都是用img标签展示的，动图用的是gif，但是我们上传视频时并没有视屏封面，就这需要上传到服务器时自动成功封面并保存 JavaCV 是一款开源的视觉处理库，基于GPLv2协议，对各种常用计算机视觉库封装后的一组jar包，封装了OpenCV、libdc1394、OpenKinect、videoInput和ARToolKitPlus等计算机视觉编程人员常用库的...
前端实现视频文件动画帧图片提取全攻略 - 附完整代码样例
Micro麦可乐的博客
04-21 5378
相信很多小伙伴在一些短视频平台上传视频的时候，系统会自动帮我们生成一些视频中的画面帧的图片，让我们作为视频封面的功能，那么这些短视频平台是如何从视频中抽取关键帧来作为封面、生成缩略图，或用于制作动图预览的？今天博主就带着大家一起来探讨这个问题，当然实现画面帧的方式前端和后端均可实现，具体要看小伙伴们的应用场景，这里我们先介绍前端的实现方式，后续博主再出一篇 基于JAVA实现的视频画面帧教程～至此在纯前端环境下基于的视频帧提取方案已经演示完毕了，在处理一些格式简单、帧数较少的场景，直接使用Canvas。
el-upload截取视频首帧作为上传封面图
m0_56683897的博客
08-21 1304
这部分就是关键代码，可以直接复制整段代码作为方法引入，需要注意的是，要在文件上传成功后调用，最好在。中，否则是拿不到file的。
使用JavaCV实现读取视频信息及自动截取封面图
m0_62396648的博客
06-07 1521
最近在对之前写的一个 Spring Boot 的视频网站项目做功能完善，需要利用 FFmpeg 实现读取视频信息和自动截图的功能，查阅资料后发现网上这部分的内容非常少，于是就有了这篇文章。视频网站项目地址 GitHub：https://github.com/PuZhiweizuishuai/PornTube 码云： VideoWeb: 一个简单的视频网站，界面参考了Youtube，后端使用Spring Boot，前端Vue，vuetifyjs。支持自动生成封面图，发送弹幕等功能。本文将介绍如何利用Javac
vue通过七牛云上传视频并获取封面
xshSun的博客
04-26 1564
vue通过七牛云上传视频并获取封面 1.引入七牛云 a.npm 安装 npm install qiniu-js b.引入 const qiniu = require('qiniu-js') // or import * as qiniu from 'qiniu-js' 2.使用 <template> <div class="upload"> <div class="uploadbox"> <div class="uploaddetai
Vue3+element-plus 实现图片图片
m0_69551472的博客
07-27 1293
用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存// console.log('上传文件', formModel.value)超详细URL.createObjectURL,还有例子!!!还有对比FileReader.readAsDataURL(file)
TikTube 一个能发弹幕的简单视频网站，界面参考了Youtube，后端使用Spring Boot，前端Vue，vuetifyjs 支持自动生成封面图，发送弹幕等功能
05-09
首先是自动生成封面图的功能，这一功能可以帮助上传的视频快速生成吸引人的封面图片，增强用户的视觉体验，同时也方便用户在视频列表中快速识别感兴趣的视频内容。其次是弹幕功能，这个功能源自日本的动画观看文化，...
vue3 ant design vue 实现上传预览 视频 并展示视频第一帧画面为封面
03-28
好的，我现在需要在Vue3中使用Ant Design Vue实现视频上传后预览，并提取视频的第一帧作为封面。首先，我应该查阅相关文档，看看Ant Design Vue的Upload组件如何配置。根据引用[2]，Upload组件属于基础组件，可能...
vue3 ant design 实现 上传视频、预览视频、下载视频、删除视频并以视频的第一帧进行展示
03-28
好的，我现在需要帮助用户在Vue3中使用Ant Design Vue实现视频上传、预览、下载、删除以及使用视频第一帧作为封面的功能。首先，我应该回顾用户提供的引用内容，虽然引用是关于下拉搜索的，但可能Ant Design Vue的...
ElementUI之表格
xrkhy的博客
08-07 855
由于ElementUI是****，所以在线引入需要先引入Vue2，在去引入ElementUI。 演示 官网网址：ElementUI表格 1. 带状态表格row-class-name=“Function({row, rowIndex})/String” 2. 固定表头(height="string/number"属性) 2.1 属性的取值 数值类型（如 height=“300”）​​：单位默认为 px，表格高度固定为 300px，内容超出时自动出现垂直滚动条，表头保持固定。 字符串类型（如 heigh
el-tree方法的整理
weixin_44601930的博客
08-08 179
设置从而高亮当前选中节点important;important;important;important;为给树形结构自定义的类名<el-treedraggable<el-tree=''"draggable添加同级章节</div>添加子章节</div>章节设置</div><div下载章节</div>删除</div></div></div></div></el-tree>methods: {// 点击树形结构节点},
elementui cascader 远程加载请求使用 选择单项等
u014642921的博客
08-09 279
背景：小程序与后端使用自定义表单渲染视图。发现若没有全选（如：省市县全部选择，指定的市3级）在pc端就会无法渲染出已经选择的区县名称。props是给他量身定做的，不要用错了：因为vue通讯中使用了props:{参数…}, 其中的参数用于。, 我当时误以为在props中进行设置就可以了，因为缺觉，所以犯了傻事。
Dashboard.vue 组件分析
weixin_45690427的博客
08-11 170
title: "总用户数",value: 0,icon: "User", // Element Plus图标名color: "#409eff", // 主题色},// ... 其他三个卡片]);
element plus table 表格操作列根据按钮数量自适应宽度
爱打篮球的猿
08-08 236
在utils直接封装autoWidthHeaderRender.js文件。这样就可以自适应宽度了，大体思路是这样。
WebGIS视角下基孔肯雅热流行风险地区分类实战解析
夜郎King的博客
08-09 2002
本研究旨在通过系统梳理 WebGIS 技术在传染病流行风险评估中的应用现状与优势，结合基孔肯雅热的流行特点和防控需求，构建一套基于 WebGIS 的流行风险地区分类展示系统。
前端工程化：pinia
最新发布
西岭千秋雪的博客
08-11 307
本文介绍了Pinia作为Vue.js官方推荐的状态管理库，用以解决组件间数据共享和状态同步问题。文章首先说明状态管理的必要性，随后详细讲解Pinia的初始化配置，包括安装、挂载和Store创建（包含state、getter、action）。最后通过示例展示如何在组件中使用Store，实现数据获取和渲染。Pinia能有效简化复杂应用的状态管理，提升开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值