BizUploadVideo 视频上传

单视频上传：格式 / 大小 / 时长三重前置校验（时长经本地 metadata 读取）、选择后自动封帧生成封面（dataURL，v-model:poster 同步）、上传中遮罩、video 预览卡（poster / controls）。上传实现由业务侧 request 注入（组件零接口），v-model 视频地址直接进表单提交。与 BizUploadImage 同族。

基础用法

上传视频

支持 mp4 / mov / webm，不超过 200MB、10 分钟；选择后自动截取首帧作为封面

v-model：（空）

封面：（空）

request 返回视频地址即入预览卡；封帧封面自动生成（后端若需要封面文件，可由业务侧把 dataURL 转存）。

<script setup lang="ts">
/** 基础用法：request 注入上传实现 + 自动封帧封面 + 时长/大小校验 */
import { ref } from 'vue'
import { BizUploadVideo } from 'vue3-ep-biz-lib'

const videoUrl = ref('')
const poster = ref('')

/** 模拟上传：1s 后返回一个公共示例视频地址 */
const upload = async (_file: File): Promise<string> => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4'
}
</script>

<template>
  <div>
    <BizUploadVideo
      v-model="videoUrl"
      v-model:poster="poster"
      :request="upload"
      :max-duration="600"
      tip="支持 mp4 / mov / webm，不超过 200MB、10 分钟；选择后自动截取首帧作为封面"
    />
    <div class="tip">v-model：{{ videoUrl || '（空）' }}</div>
    <div class="tip">封面：{{ poster !== '' ? `${poster.slice(0, 48)}…（dataURL）` : '（空）' }}</div>
  </div>
</template>

<style scoped>
.tip {
  margin-top: 6px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  word-break: break-all;
}
</style>

显示代码

编辑回显 · 尺寸变量 · 关闭封帧

编辑态：已有视频直接回显（poster 可传外链封面）；删除后出现「重新上传」触发块

编辑态传 model-value + poster（外链）直接回显；css 变量 --biz-upload-video-width 控制卡片宽。

<script setup lang="ts">
/** 进阶：编辑回显（外部封面 poster）+ css 变量改尺寸 + 关闭封帧 */
import { ref } from 'vue'
import { BizUploadVideo } from 'vue3-ep-biz-lib'

const videoUrl = ref('https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4')
const poster = ref('https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=480&h=270&fit=crop')

const upload = async (_file: File): Promise<string> => {
  await new Promise((resolve) => setTimeout(resolve, 1200))
  return 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4'
}
</script>

<template>
  <div>
    <BizUploadVideo
      v-model="videoUrl"
      :poster="poster"
      :request="upload"
      :capture="false"
      trigger-text="重新上传"
      style="--biz-upload-video-width: 320px"
    />
    <div class="tip">编辑态：已有视频直接回显（poster 可传外链封面）；删除后出现「重新上传」触发块</div>
  </div>
</template>

<style scoped>
.tip {
  margin-top: 8px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

课件上传（时长上限）

上传课件视频

课程课件：mp4 / mov / webm，≤1GB、时长 ≤30 分钟；选后自动截取首帧为课程封面

30 分钟 / 1GB 上限 + tip 说明拍摄要求（在线课程场景）。

<script setup lang="ts">
/** 课件上传：30 分钟时长上限 + 封面规则说明 */
import { ref } from 'vue'
import { BizUploadVideo } from 'vue3-ep-biz-lib'

const url = ref('')

const upload = async (_file: File): Promise<string> => {
  await new Promise((resolve) => setTimeout(resolve, 1200))
  return 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4'
}
</script>

<template>
  <div>
    <BizUploadVideo
      v-model="url"
      :request="upload"
      :max-duration="1800"
      :max-size="1024"
      trigger-text="上传课件视频"
      tip="课程课件：mp4 / mov / webm，≤1GB、时长 ≤30 分钟；选后自动截取首帧为课程封面"
    />
  </div>
</template>

显示代码

设计出图封面

上传正片

capture=false 关闭自动封帧，封面走设计出图外链

capture=false 关闭自动封帧，poster 外链由素材库统一选择。

<script setup lang="ts">
/** 手动封面：capture=false + 外链 poster（封面由设计统一出图） */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizUploadVideo } from 'vue3-ep-biz-lib'

const url = ref('')
const poster = ref('https://images.unsplash.com/photo-1516280440614-37939bbacd81?w=480&h=270&fit=crop')

const upload = async (_file: File): Promise<string> => {
  await new Promise((resolve) => setTimeout(resolve, 900))
  return 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4'
}

const pickCover = (): void => {
  ElMessage.info('真实项目：从素材库选择封面或上传封面图，更新 poster')
}
</script>

<template>
  <div>
    <BizUploadVideo
      v-model="url"
      :poster="poster"
      :request="upload"
      :capture="false"
      trigger-text="上传正片"
      style="--biz-upload-video-width: 300px"
    />
    <div class="ops">
      <ElButton size="small" @click="pickCover">从素材库换封面</ElButton>
      <span class="tip">capture=false 关闭自动封帧，封面走设计出图外链</span>
    </div>
  </div>
</template>

<style scoped>
.ops {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.tip {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

时长校验演示

上传短视频

视频动态素材：时长 ≤10 秒（本地长视频会被拦截，error 事件拿到原因）

max-duration=10 秒极易触发：本地长视频被拦截，error 事件拿到原因。

<script setup lang="ts">
/** 校验演示：时长上限 10 秒（易触发）+ 失败原因 toast */
import { ref } from 'vue'
import { BizUploadVideo } from 'vue3-ep-biz-lib'

const url = ref('')
const lastError = ref('')

const upload = async (_file: File): Promise<string> => {
  await new Promise((resolve) => setTimeout(resolve, 800))
  return 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4'
}
</script>

<template>
  <div>
    <BizUploadVideo
      v-model="url"
      :request="upload"
      :max-duration="10"
      trigger-text="上传短视频"
      tip="视频动态素材：时长 ≤10 秒（本地长视频会被拦截，error 事件拿到原因）"
      @error="(msg) => (lastError = msg)"
    />
    <div class="tip" v-if="lastError !== ''">最近一次校验失败：{{ lastError }}</div>
  </div>
</template>

<style scoped>
.tip {
  margin-top: 8px;
  font-size: 13px;
  color: var(--el-color-danger);
}
</style>

显示代码

表单集成

标题

正片

上传视频

el-form 必填 + 提交同时携带视频地址与封面 dataURL。

<script setup lang="ts">
/** el-form 集成：视频必填 + 提交携带 url / poster */
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { BizUploadVideo } from 'vue3-ep-biz-lib'

const formRef = ref<FormInstance>()
const form = reactive({ title: '', video: '', poster: '' })
const rules: FormRules = {
  title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
  video: [{ required: true, message: '请上传视频', trigger: 'change' }],
}

const upload = async (_file: File): Promise<string> => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4'
}

const submit = (): void => {
  void formRef.value?.validate((valid) => {
    if (valid) ElMessage.success(`提交：${form.title} / ${form.video.slice(0, 40)}… / 封面已携带`)
  })
}
</script>

<template>
  <ElForm ref="formRef" :model="form" :rules="rules" label-width="80px" style="max-width: 460px">
    <ElFormItem label="标题" prop="title">
      <ElInput v-model="form.title" placeholder="视频标题" />
    </ElFormItem>
    <ElFormItem label="正片" prop="video">
      <BizUploadVideo v-model="form.video" :request="upload" @update:poster="(p) => (form.poster = p)" />
    </ElFormItem>
    <ElFormItem>
      <ElButton type="primary" @click="submit">发布</ElButton>
    </ElFormItem>
  </ElForm>
</template>

显示代码

Props

属性名	类型	默认值	说明
model-value / v-model	string	''	视频地址
request	(file: File) => Promise<string>	—	必填。上传实现（业务接口在业务侧）
accept	string	'video/mp4,…'	接受的类型
max-size	number	200	大小上限（MB）
max-duration	number	600	时长上限（秒）
poster	string	''	封面地址（展示用）
capture	boolean	true	选择后自动封帧，update:poster 同步 dataURL
tip	string	''	底部提示
trigger-text	string	'上传视频'	触发块文案

其余属性（name / headers / limit…）经 v-bind="$attrs" 透传 el-upload。

Events

事件名	参数	说明
update:model-value	(url: string)	视频地址变化（删除时为空串）
update:poster	(poster: string)	封面变化（封帧 dataURL / 删除清空）
error	(message: string)	校验不过 / 上传失败

Slots

插槽名	说明
—	无插槽

Expose

属性/方法	说明
onRemove	() => void 清空视频与封面