当前位置: 首页 > news >正文

结合el-upload修改支持上传图片、视频并预览

结合element plus的el-upload标签,实现上传图片和视频,并支持在线预览和放大
1、html部分

<el-form-item label="活动照片、视频"><el-uploadv-model:file-list="state.photoList":action="state.uploadUrl"accept=".jpg,.png,.jpeg,.mp4,.mov,.avi"list-type="picture-card":limit="10":on-success="handleUpload":class="state.photoList.length === 10 ? 'hideUpload' : ''"><el-icon><Plus /></el-icon><template #file="{ file }"><div><imgv-if="file.name.indexOf('.jpg') > -1|| file.name.indexOf('.png') > -1|| file.name.indexOf('.jpeg') > -1":src="file.url"alt=""class="el-upload-list__item-thumbnail" /><videov-else-if="file.name.indexOf('.mp4') > -1|| file.name.indexOf('.mov') > -1|| file.name.indexOf('.avi') > -1"class="el-upload-list__item-thumbnail"style="width: 100%;height: 100%;"autoplay:src="file.url"><source :src="file.url" type="video/mp4" /><source :src="file.url" type="video/mov" /><source :src="file.url" type="video/avi" /></video><span class="el-upload-list__item-actions"><span class="el-upload-list__item-preview" @click="handlePreview(file)"><el-icon><zoom-in /></el-icon></span><spanv-if="!state.disabledBtn"class="el-upload-list__item-delete"@click="handleRemove(file)"><el-icon><Delete /></el-icon></span></span></div></template></el-upload><el-dialog v-model="state.dialogVisible"><imgw-full:src="state.dialogImageFile.url"alt=""v-if="state.dialogImageFile.name.indexOf('.jpg') > -1|| state.dialogImageFile.name.indexOf('.png') > -1|| state.dialogImageFile.name.indexOf('.jpeg') > -1" /><videov-else-if="state.dialogImageFile.name.indexOf('.mp4') > -1|| state.dialogImageFile.name.indexOf('.mov') > -1|| state.dialogImageFile.name.indexOf('.avi') > -1"w-fullstyle="width: 100%;height: 100%;"controlsautoplay:src="state.dialogImageFile.url"><source :src="state.dialogImageFile.url" type="video/mp4" /><source :src="state.dialogImageFile.url" type="video/mov" /><source :src="state.dialogImageFile.url" type="video/avi" /></video></el-dialog>
</el-form-item>

2、js部分

const state = reactive({photoList: [] as any,           // 上传图片dialogVisible: false as boolean,dialogImageFile: '' as any,disabledBtn: false as boolean,
});// 预览图片和视频
const handlePreview = (file: any) => {state.dialogImageFile = file;state.dialogVisible = true;
}
// 删除图片视频
const handleRemove = (file: any) => {state.photoList.map((item: any, index: number) => {if(item.response && item.response.data) {if(item.response.data == file.response?.data || item.response.data == file.url) {state.photoList.splice(index, 1);}} else if(item.url) {if(item.url == file.response?.data || item.url == file.url) {state.photoList.splice(index, 1);}}})
}
// 上传图片
const handleUpload = (res: any) => {if(res.code != 0) {state.photoList.pop()ElMessage.error(res.msg)}
}

3、css部分

<style lang="scss" scoped>:deep(.hideUpload .el-upload--picture-card)  {display: none;}:deep(.el-upload--picture-card) {width: 243px;height: 180px;}:deep(.el-upload-list--picture-card .el-upload-list__item) {width: 243px;height: 180px;}
</style>

相关文章:

结合el-upload修改支持上传图片、视频并预览

结合element plus的el-upload标签&#xff0c;实现上传图片和视频&#xff0c;并支持在线预览和放大 1、html部分 <el-form-item label"活动照片、视频"><el-uploadv-model:file-list"state.photoList":action"state.uploadUrl"accept…...

1.SQL - 概述

1. SQL语句分类 • 数据定义语言&#xff1a;简称DDL(Data Definition Language)&#xff0c;用来定义数据库对象&#xff1a;数据库&#xff0c;表&#xff0c;列等。关键字&#xff1a;create&#xff0c;alter&#xff0c;drop等 • 数据操作语言&#xff1a;简称DML(Data …...

GaussDB数据库表创建行访问控制策略

目录 一、前言 二、GaussDB中的行访问控制 1、CREATE ROW LEVEL SECURITY POLICY语法 2、ALTER ROW LEVEL SECURITY POLICY语法 3、ROW LEVEL SECURITY策略与适配SQL语法关系 三、GaussDB中的行访问控制策略示例 1、实现GaussDB行访问控制的一般步骤 2、行访问控制策略…...

提升设备巡检效率的关键:易点易动设备管理系统的应用

随着互联网技术的发展,智慧设备管理已成为各行各业提升运营效率的重要选择。相比传统的手动巡检方式,采用设备管理系统可以实现物联网技术给企业带来更高效的运营方式。其中,易点易动作为一款成熟的设备管理系统,其广泛应用于提升设备巡检效率这一领域发挥了很好的作用。 采用易…...

【C++】STL 容器 - list 双向链表容器 ① ( 容器特点 | 容器操作时间复杂度 | 构造函数 )

文章目录 一、 list 双向链表容器简介1、容器特点2、容器操作时间复杂度3、遍历访问5、头文件 二、 list 双向链表容器 构造函数1、默认无参构造函数2、创建包含 n 个相同元素的 list 双向链表3、使用初始化列表构造 list 双向链表4、使用另外一个 list 容器 构造 list 双向链表…...

[C/C++]数据结构 希尔排序

&#x1f966;前言: 希尔排序也称 “缩小增量排序”&#xff0c;它也是一种插入类排序的方法,在学习希尔排序之前我们首先了解一下直接插入排序. 一: &#x1f6a9;直接插入排序 1.1 &#x1f31f;排序思路 直接插入排序的基本原理是将一条记录插入到已排好的有序表中&#x…...

SQL进阶:子查询

一般情况下,我们都是直接对表进行查询,但有时候,想要的数据可能通过一次select 获取不到,需要嵌套select,这样就形成了子查询。 子查询可以位于查询语句的任意位置,主要的注意点在于用于不同的位置,和不同的关键字一起使用时,需要注意返回的列的数量和行的数量。 位于…...

5、IDEA集成Git

IDEA集成Git 1. 配置Git忽略文件2. 定位Git程序3. 初始化本地库、添加暂存区、提交到本地库4. 切换版本5. 创建分支和切换分支6. 合并分支7. 解决冲突 1. 配置Git忽略文件 问题1&#xff1a;为什么要忽略他们&#xff1f; 与项目的实际功能无关&#xff0c;不参与服务器上部署…...

oracle数据库sqlplus登录卡顿

问题描述 新安装了一套oracle 11.2.0.1 版本的数据库服务器&#xff0c;出现了在服务器本地通过sqlplus / as sysdba登录的时候很快&#xff0c;但是通过监听登录的时候就非常的慢&#xff0c;卡顿&#xff0c;大概需要1分钟多的时间才能登进数据库。 之前安装了好几套oracle …...

【C#】Visual Studio 2022 远程调试配置教程

在某些特殊的情况下&#xff0c;开发机和调试机可能不是同一台设备&#xff0c;此时就需要远程调试了。 开发机配置 首先需要确保两台机器在同一局域网下。 创建共享文件夹 随便找个地方新建一个文件夹&#xff0c;用来放编译结果。例如我这里是 D:\DebuggingWorkspace\。 …...

LSTM的记忆能力实验

长短期记忆网络&#xff08;Long Short-Term Memory Network&#xff0c;LSTM&#xff09;是一种可以有效缓解长程依赖问题的循环神经网络&#xff0e;LSTM 的特点是引入了一个新的内部状态&#xff08;Internal State) 和门控机制&#xff08;Gating Mechanism&#xff09;&am…...

Unity之ShaderGraph如何实现瓶装水效果

前言 有一个场景在做效果时,有一个水瓶放到桌子上的设定,但是模型只做了个水瓶,里面是空的,所以我就想办法,如何做出来瓶中装睡的效果,最好是能跟随瓶子有液体流动的效果。 如下图所示: 水面实现 水面效果 液体颜色设置 因为液体有边缘颜色和内里面颜色,所以要分开…...

【python与机器学习3】感知机和门电路:与门,或门,非门等

目录 1 电子和程序里的与门&#xff0c;非门&#xff0c;或门&#xff0c;与非门 &#xff0c;或非门&#xff0c;异或门 1.1 基础电路 1.2 所有的电路情况 1.3 电路的符号 1.4 各种电路对应的实际电路图 2 各种具体的电路 2.1 与门&#xff08;and gate&#xff09; 2…...

关键字:extends关键字

在 Java 中&#xff0c;extends 是一个关键字&#xff0c;用于表示继承关系。当一个类使用 extends 关键字时&#xff0c;它表示该类是一个子类&#xff0c;并且继承了父类的属性和方法。 以下是 extends 关键字的解析&#xff1a; 语法&#xff1a; 描述&#xff1a; ChildC…...

KEPServerEX 6 之【外篇-1】PTC-ThingWorx服务端软件安装 Tomcat10本地安装

本文目标: 安装 Java 和 Apache Tomcat ,为ThingWorx安装做基础。 ----------------------------------------------------------------------- 安装重点 --------------------------------------------------------------------- 1. 安装 Java 11 / JDK 11 添加系…...

(Mac上)使用Python进行matplotlib 画图时,中文显示不出来

【问题描述】 ①报错确缺失字体&#xff1a; ②使用matplotlib画图&#xff0c;中文字体显示不出来 【问题思考】 在网上搜了好多&#xff0c;关于使用python进行matplotlib画图字体显示不出来的&#xff0c;但是我试用了下&#xff0c;对我来说都没有。有些仅使用于windows系…...

万能刷题小程序源码系统:功能强大+试题管理+题库分类+用户列表 附带完整的搭建教程

随着互联网技术的不断进步&#xff0c;线上学习已成为越来越多人的选择。刷题作为提高学习效果的重要方式&#xff0c;一直受到广大学生的喜爱。然而&#xff0c;市面上的刷题软件虽然繁多&#xff0c;但功能各异&#xff0c;质量参差不齐&#xff0c;使得很多用户在选择时感到…...

5.2 显示窗口的内容(二)

三,显示器几何形状管理 只有显示管理器被允许更改显示器的几何形状。窗口管理器也是显示管理器。 3.1 当显示器显示其自身内容时 当显示器显示其自身内容时,适用以下属性: 显示属性描述SCREEN_PROPERTY_PROTECTION_ENABLE表示显示目标窗口是否需要内容保护。只要显示器上…...

SpringCloud 整合 Canal+RabbitMQ+Redis 实现数据监听

1Canal介绍 Canal 指的是阿里巴巴开源的数据同步工具&#xff0c;用于数据库的实时增量数据订阅和消费。它可以针对 MySQL、MariaDB、Percona、阿里云RDS、Gtid模式下的异构数据同步等情况进行实时增量数据同步。 当前的 canal 支持源端 MySQL 版本包括 5.1.x , 5.5.x , 5.6.…...

一体机定制_工控触控一体机安卓主板方案

工控一体机是一种集成化的硬件方案&#xff0c;采用了联发科MT8768八核芯片和12nm制程工艺。该芯片拥有2.0GHz的主频和IMG PowerVR GE8320图形处理GPU&#xff0c;具备强大的视频处理能力&#xff0c;并且兼容大部分的视频格式和解码能力。工控一体机搭载了Android 9.0操作系统…...

非参数回归实战:从理论到Python实现

1. 非参数回归&#xff1a;当数据拒绝被简单定义时 记得第一次接触回归分析时&#xff0c;老师用"用直线拟合数据点"来解释线性回归。但当我把这个方法用在实际项目中时&#xff0c;发现很多数据根本不像教科书里画的那样规整。那些弯弯曲曲的数据点&#xff0c;像是…...

港科喜讯|[港科百创]参赛项目上市!视觉语言大模型第一股诞生!

2026年3 月 30 日&#xff0c;山东极视角科技股份有限公司&#xff08;股票代码&#xff1a;6636.HK&#xff09;在香港联合交易所主板正式上市。这家曾斩获香港科技大学第六届百万奖金国际创业大赛深圳赛区一等奖的科创企业&#xff0c;同时也是香港科大"创科行"(第…...

《B3845 [GESP样题 二级] 勾股数》

题目背景 对应的选择、判断题&#xff1a;https://ti.luogu.com.cn/problemset/1102 题目描述 勾股数是很有趣的数学概念。如果三个正整数 a,b,c&#xff0c;满足 a2b2c2&#xff0c;而且 1≤a≤b≤c&#xff0c;我们就将 a,b,c 组成的三元组 (a,b,c) 称为勾股数。你能通过编…...

如何写 Skill

核心概念 Skill 是一个自包含的模块&#xff0c;用来给 Claude/Cascade 注入特定领域的知识、工作流和工具。本质上就是一个"新手入职指南"&#xff0c;让通用 AI 变成某个领域的专家。 目录结构 skill-name/ ├── SKILL.md # 必须&#xff0c;核心文件 └…...

ESP32 ILI9341高性能驱动:64字节DMA突发传输优化

1. 项目概述ILI9341_ESP32 是一款专为 ESP32 平台深度优化的 ILI9341 TFT LCD 显示驱动库。其核心设计目标并非简单实现显示功能&#xff0c;而是在硬件能力边界内榨取极致帧率与响应性能。该库直面 ESP32 的 SPI 总线特性——支持 64 字节一次性突发传输&#xff08;burst tra…...

C语言回调函数在TCP客户端中的应用与实践

1. 回调函数基础概念解析回调函数是C语言中一种强大的编程机制&#xff0c;它允许我们将函数作为参数传递给其他函数。这种设计模式在现代编程中极为常见&#xff0c;特别是在事件驱动编程、异步操作和模块化设计中。1.1 回调函数的本质回调函数本质上是一个通过函数指针调用的…...

2026年4月如何集成OpenClaw?华为云保姆级10分钟安装及百炼APIKey配置方法

2026年4月如何集成OpenClaw&#xff1f;华为云保姆级10分钟安装及百炼APIKey配置方法。OpenClaw&#xff08;原Clawdbot&#xff09;作为2026年主流的AI自动化助理平台&#xff0c;可通过阿里云轻量服务器实现724小时稳定运行&#xff0c;并快速接入钉钉&#xff0c;让AI在企业…...

拯救者笔记本性能优化终极指南:如何用Lenovo Legion Toolkit释放硬件潜力

拯救者笔记本性能优化终极指南&#xff1a;如何用Lenovo Legion Toolkit释放硬件潜力 【免费下载链接】LenovoLegionToolkit Lightweight Lenovo Vantage and Hotkeys replacement for Lenovo Legion laptops. 项目地址: https://gitcode.com/gh_mirrors/le/LenovoLegionTool…...

千问3.5-2B科研助手应用:论文插图内容解析、实验数据图趋势简述生成

千问3.5-2B科研助手应用&#xff1a;论文插图内容解析、实验数据图趋势简述生成 1. 科研场景下的视觉语言模型应用 在科研工作中&#xff0c;论文插图和实验数据图是研究成果展示的重要载体。传统的人工解读和分析过程往往耗时费力&#xff0c;特别是当需要处理大量图表时。千…...

React - useEffect、useRef、Fragment

一、useEffect 1、基本介绍 useEffect 用于在函数式组件中执行副作用操作&#xff0c;用于替代类组件中的生命周期钩子 useEffect(() > {// 副作用操作return () > {// 清理函数&#xff08;可选&#xff09;}; }, [依赖项数组]);副作用操作&#xff1a;发送请求数据获取…...