惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

T
Tailwind CSS Blog
人人都是产品经理
人人都是产品经理
博客园 - 叶小钗
大猫的无限游戏
大猫的无限游戏
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 【当耐特】
The Cloudflare Blog
博客园 - 聂微东
博客园 - 司徒正美
量子位
博客园 - 三生石上(FineUI控件)
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
G
Google Developers Blog
Apple Machine Learning Research
Apple Machine Learning Research
罗磊的独立博客
酷 壳 – CoolShell
酷 壳 – CoolShell
Y
Y Combinator Blog
S
SegmentFault 最新的问题
T
The Blog of Author Tim Ferriss
P
Proofpoint News Feed
Google DeepMind News
Google DeepMind News
Blog — PlanetScale
Blog — PlanetScale
有赞技术团队
有赞技术团队
A
About on SuperTechFans

博客园 - Shapley

项目心得 进程间通讯方式 C#使用MCP协议调用大模型示例 SQL Server LEAD函数实践 sql server行专列一例 数据库字段排序方法两则 Sql Server生成ULID例子 审批流进化记 winform+Task+async 献丑贴:Task.Run中foreach优化 Sql Server Begin TRY sample No service for type 'Microsoft.AspNetCore.Mvc.ViewFeatures.Filters.ValidateAntiforgeryTokenAuthorizationFilter' has been registered. 某低代码平台自定义控件技术点 Element-plus的el-date-picker控件动态切换中英文方案 Chrome浏览器无法查看页面跳转前的请求日志及解决办法 JWT自动刷新草案 Ajax方法POST的两种提交方式 H5项目在微信浏览器运行实录 Sql Server变量声明及使用技巧 修改Dify的Nginx对外访问端口 Task with Console(with SemaphoreSlim) Task实战 asp.net core 9.0发布centos7.9 Barrier CountdownEvent
element-plus上传视频并生成缩略图(封面)方案
Shapley · 2025-08-03 · via 博客园 - Shapley

1.所需的组件:el-upload

 <el-upload class="avatar-uploader" :action="attr1" :data="{ type: 3 }" :limit="1" accept="video/mp4" tip="上传图片"
            :on-success="handleSuccess1" :on-error="handleError1" :on-preview="handlePreview1" list-type="picture-card">
            <el-icon class="avatar-uploader-icon">
              <VideoCamera />
            </el-icon>
            <template #tip>
              <div class="el-upload__tip">点击上传产品视频</div>
            </template>
          </el-upload>

注意,这里并没有预览组件,预览组件另外定义:

 <el-dialog v-model="dialogVisible1">
        <video
        :src="dialogVideoUrl"
        controls
        style="width: 736px; "
      ></video>
      </el-dialog>

然后在ts代码中定义:

const handlePreview1: UploadProps['onPreview'] = (uploadFile) => {
  dialogVideoUrl.value = BASEURL+uploadFile.response.data;
  dialogVisible1.value = true
};
const handleSuccess1 = (response, file) => {
  if (response.code == 200) {
    file.url =BASEURL+"/upload/c8ab872f-d128-489b-b351-013c569bdf8c/abc.jpg"
  }
  else {
    ElMessage.error(response.message);
  }

};
const handleError1 = (err, file, fileList) => {
  console.error('上传失败:', err, file, fileList);
};

说明:

1.在upload组件中不适用内置的预览组件,而是通过el-dialog组件来独立预览。

2.上传视频时可以在前端实现截图,也可以在后端实现截图,然后将图地址返回给前端使用,本方案为了简便,直接使用后端已经有的图片作为缩略图(封面)。

3.在handleSuccess回调函数中,设置file的url地址来显示缩略图。

4.然后在预览事件中设置视频组件的url.

本文是一个简易的示例,如有不妥之处,欢迎指出。