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

【el-upload】el-upload组件 - list-type=“picture“ 时,文件预览展示优化

目录

  • 问题图
  • el-upload
  • 预览组件 PicturePreview
  • 效果展示

问题图

在这里插入图片描述

el-upload

<el-uploadref="upload"multipledragaction="#":auto-upload="false":file-list="fileList"name="files":accept="`.png,.jpg,.jpeg,.JGP,.JPEG,.PNG,.doc,.docx,.xls,.xlsx${isTz ? ',.mp4,.MP4' : ''}`":on-change="beforeAvatarUpload"list-type="picture"
><i class="el-icon-upload" /><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div><div slot="tip" class="el-upload__tip">支持上传png/jpg/jpeg/doc/docx/xls/xlsx文件,且不超过5M</div><!-- 【使用组件】 --><div slot="file" slot-scope="{ file }"><PicturePreview :file="file" @remove="removeFile" /></div>
</el-upload>import PicturePreview from '@/components/PicturePreview'components:{PicturePreview}removeFile(file) {this.$refs.upload.handleRemove(file)
},

预览组件 PicturePreview

<!-- el-upload组件 - list-type="picture" 时,文件预览展示优化 -->
<template><div class="file_container"><div class="file"><el-imagev-if="/(gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG)$/.test(fileType)":src="file.url":preview-src-list="[file.url]"/><i v-else class="el-icon-tickets" /></div><div class="name">{{ file.name }}</div><i class="el-icon-close" @click="$emit('remove', file)" /></div>
</template><script>
export default {name: 'PicturePreview',components: {},props: {file: {type: Object,required: true}},data() {return {}},computed: {fileType() {return this.file.name.split('.').pop()}},watch: {},created() {},methods: {}
}
</script><style lang='scss' scoped>
.file_container {position: relative;.file {$size: 80px;width: $size;height: $size;background-color: #f7f7f7;position: absolute;left: -85px;top: -5px;display: flex;align-items: center;justify-content: center;.el-image {width: 100%;height: 100%;}.el-icon-tickets {font-size: 30px;}}.name {}.el-icon-close {position: absolute;top: 5px;right: 5px;font-size: 10px;}
}
</style>

效果展示

在这里插入图片描述

相关文章:

【el-upload】el-upload组件 - list-type=“picture“ 时,文件预览展示优化

目录 问题图el-upload预览组件 PicturePreview效果展示 问题图 el-upload <el-uploadref"upload"multipledragaction"#":auto-upload"false":file-list"fileList"name"files":accept".png,.jpg,.jpeg,.JGP,.JPEG,.…...

STM32F103系列配置中断向量表偏移(Keil/STM32CubeIDE)

需要在flash中添加bootloader的话&#xff0c;需要对flash进行分区&#xff0c;即bootloader区和app区(程序运行区)&#xff0c;主要记录在 Keil 平台和 STM32CubeIDE平台 上的中断向量表偏移配置&#xff0c;以偏移 0x2800 为例&#xff0c;即预留10k大小的空间给bootloader …...

Redis常用数据类型和使用常见以及基本操作举例(适合初学者,以医药连锁管理系统为背景)

Redis的常见数据类型&#xff0c;包括String、Hash、List、Set、Zset等&#xff0c;这些数据类型都有各自的特点和适用场景。接下来&#xff0c;将这些数据类型与医药连锁管理系统的业务场景进行匹配。 String类型&#xff0c;适合存储单个值。在医药连锁管理系统中&#xff0…...

ASL扩展坞方案|Type-c转换器方案|ASL原厂代理商

安格瑞科技代理的ASL主板组件系列包括CS5211、CS5311、CS5232、CS5263、CS621x、CS5523、CS5518等产品&#xff1b; CS5228ANDP to HDMI(4K60HZ)CS5262ANDP (4lanes) to HDMI2.0 4k60Hz VGACS5263ANDP(4lanes) to HDMI2.0 4k60HzCS5363ANDP (4lanes) to HDMI2.0 4k60Hz CS521…...

论文略读(2025.3.18-更新中)

关于可控视频生成 I2V3D: Controllable image-to-video generation with 3D guidance Image to Video工作&#xff0c;能够实现给一张图&#xff0c;输出一个视频&#xff0c;且可以控制相机。动态信息来自于用户手工设计&#xff08;相机移动&#xff0c;人体骨骼驱动&#x…...

基于SpringBoot的“校园招聘网站”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“校园招聘网站”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统整体功能图 局部E-R图 系统首页界面 系统注册…...

【Linux进程七】程序地址空间

【Linux进程七】程序地址空间 1.进程的地址空间分布2.类型的本质是偏移量3.什么是进程地址空间4.页表的映射和访问权限字段5.地址空间的作用 1.进程的地址空间分布 堆是向上扩展的&#xff0c;栈是向下扩展的 因为字符常量区和代码区相邻&#xff0c;受到同样的保护&#xff0c…...

Linux C/C++编程——线程

线程是允许应用程序并发执行多个任务的一种机制&#xff0c;线程参与系统调度。 系统调度的最小单元是线程、而并非进程。 线程包含在进程之中&#xff0c;是进程中的实际运行单位。一个线程指的是进程中一个单一顺序的控制流&#xff08;或者说是执行路线、执行流&#xff09;…...

【Spring Boot 中 `@Value` 注解的使用】

文章目录 一、前言二、Value 注解简介三、Value 注解的常见用法1. 读取 application.properties 或 application.yml 配置值&#xff08;1&#xff09;配置文件示例&#xff08;2&#xff09;Java 代码示例&#xff08;3&#xff09;测试输出 2. 使用 Value 设置默认值3. 读取系…...

【CAD二次开发】调试无法进入断点提示无可用源问题(非空心断点)

问题截图&#xff1a;显示无可用源&#xff0c;关闭后F5走完后&#xff0c;启动的调试就中断了 操作是&#xff1a;打开Cad&#xff0c;打开dwg后&#xff0c;执行命令&#xff0c;就出现以上截图问题。 问题来源&#xff1a;通常是由于 AutoCAD 的 纤程模式&#xff08;Fiber&…...

Ubuntu下Docker部署Misskey:打造你的去中心化社交平台

引言 在信息爆炸的时代&#xff0c;人们对于社交平台的需求日益增长&#xff0c;同时也更加注重数据的隐私和自由。Misskey作为一个开源的去中心化社交平台&#xff0c;为用户提供了一个全新的选择。本文将详细介绍如何在Ubuntu Linux环境下&#xff0c;利用Docker快速部署Mis…...

【Vue3】01-vue3的基础 + ref reactive

首先确保已经有了ES6的基础 本文介绍 vue 的基础使用以及 两种响应数据的方式。 目录 1. 创建一个vue应用程序 2. Vue模块化开发 3. ref 和 reactive 的区别 1. 创建一个vue应用程序 所需的两个文件&#xff1a; https://unpkg.com/vue3/dist/vue.global.js https://un…...

C++实现rabbitmq生产者消费者

RabbitMQ是一个开源的消息队列系统&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c; 特点 可靠性&#xff1a;通过持久化、镜像队列等机制保证消息不丢失&#xff0c;确保消息可靠传递。灵活的路由&#xff1a;提供多种路由方式&#xff0c;如…...

Simple-BEV的bilinear_sample 作为view_transformer的解析,核心是3D-2D关联点生成

文件路径models/view_transformers 父类 是class BiLinearSample(nn.Module)基于https://github.com/aharley/simple_bev。 函数解析 函数bev_coord_to_feature_coord的功能 将鸟瞰图3D坐标通过多相机&#xff08;针孔/鱼眼&#xff09;内外参投影到图像特征平面&#xff0…...

Rust嵌入式开发环境搭建指南(基于Stm32+Vscode)

Rust嵌入式开发环境搭建指南(基于Stm32+Vscode) 部分目录如下所示: 目录 简介Rust开发环境安装STM32开发工具链安装VSCode环境配置VSCode插件安装调试器配置项目创建与配置常见问题与解决方案简介 本文档旨在指导开发者如何搭建基于Rust语言的STM32嵌入式开发环境。相比传…...

springboot操作redis集群,注意事项

整合redis可查看博文 springboot 整合redis_springboot整合redis csdn-CSDN博客 集群中操作注意事项 1 多键操作失败&#xff1a; 当使用multiGet等需要同时访问多个键的方法时&#xff0c;如果没有使用Hash Tags&#xff0c;这些键可能会被分配到不同的槽中。如果这些槽位于…...

计算机技术系列博客——目录页(持续更新)

1.1 博客目录专栏 1.1.1 博客文章导航 计算机技术系列博客——目录页 1.1.2 网页资源整理 2.1 计算机科学理论 2.2 软件工程技术 2.2.1.1 编程语言 Java Java语言基础 (1) Java基础知识总结01——Java基础篇 (2) Java基础知识总结02——集合框架篇 (3) Java基础知识总结03—…...

@maptalks/gl-layers中的VectorTileLayer的setStyle属性的全部line配置

maptalks/gl-layers中的VectorTileLayer的setStyle属性的全部line配置 关于 maptalks/gl-layers 中 VectorTileLayer 的 setStyle 方法 在 maptalks/gl-layers 库中&#xff0c;VectorTileLayer 提供了一个灵活的方式来设置矢量瓦片图层的样式。通过调用 setStyle 方法&#xf…...

sql小记,20250319

ps:基于sqlserver 一、绩效管理系统表设计 1.表设计 Users用户表&#xff1a;包含id&#xff0c;用户名&#xff0c;密码。 AppraisalBases评价(职位基数)表&#xff1a;包含职位id&#xff0c;职位年终奖基数 AppraisalCoeffcients评价系数表&#xff1a;包含类别id, 类别&…...

【亚马逊云科技】大模型选型实战(挑选和测评对比最适合业务的大模型)

文章目录 前言1、实验内容2、手册内容 一、环境准备二、Prompt 实战与模型配置2.1 基于 Amazon Bedrock 对比测试不同模型的逻辑推理效果2.2 基于 Amazon Bedrock 对比测试不同模型知识问答能力2.3 Prompt 实战结果分析 三、基于 Amazon Bedrock Evaluations 进行模型评测与自动…...

Linux 用户与组管理实战:经验分享与最佳实践

在 Linux 系统管理中&#xff0c;用户和组的管理是保障系统安全和资源分配的重要环节。本文将深入介绍如何创建和管理用户与组&#xff0c;包括 UID、GID 的设置&#xff0c;主组与附加组的分配&#xff0c;以及常见问题的排查和解决。本文还结合实际操作经验&#xff0c;总结了…...

详解如何通过Python的BeautifulSoup爬虫+NLP标签提取+Dijkstra规划路径和KMeans聚类分析帮助用户规划旅行路线

系统模块&#xff1a; 数据采集模块&#xff08;爬虫&#xff09;&#xff1a;负责从目标网站抓取地点数据&#xff08;如名称、经纬度、描述等&#xff09; 数据预处理模块&#xff08;标签算法&#xff09;&#xff1a;对抓取到的地点数据进行清洗和分类。根据地点特征&…...

Java Stream两种list判断字符串是否存在方案

这里写自定义目录标题 背景初始化方法一、filter过滤方法二、anyMatch匹配 背景 在项目开发中&#xff0c;经常遇到筛选list中是否包含某个子字符串&#xff0c;有多种方式&#xff0c;本篇主要介绍stream流的filter和anyMatch两种方案&#xff0c;记录下来&#xff0c;方便备…...

C语言-指针变量和变量指针

指针 预备知识 内存地址 字节&#xff1a;字节是内存的容量单位&#xff0c;英文名Byte&#xff0c;1Byte8bits 地址&#xff1a;系统为了便于区分每一个字节面对它们的逐一进行编号&#xff08;编号是唯一的&#xff09;&#xff0c;称为内存地址&#xff0c;简称地址。int…...

CMS漏洞-WordPress篇

一.姿势一&#xff1a;后台修改模板拿WebShell 1.使用以下命令开启docker cd /www/wwwroot / vulhub / wordpress / pwnscriptum docker - compose up - d 如果发现不能开启&#xff0c;可以检查版本和端口 2.访问网址登录成功后 外观 &#x1f449;编辑 &#x1f449;404.…...

初识Brainstorm(matlab)

Brainstorm是一款开源应用程序&#xff0c;专门用于分析脑部记录数据&#xff1a;MEG、EEG、fNIRS、ECoG、深部电极等。该应用程序免费&#xff0c;而且不需要Matlab许可证。Brainstorm主要优势是简单直观的图形界面&#xff0c;不需要任何编程知识。具体内容&#xff0c;可查看…...

2025年智能系统、自动化与控制国际学术会议(ISAC 2025)

重要信息 2025 International Conference on Intelligent Systems, Automation and Control 2025年3月28-30日 | 中国西安理工大学 | 会议官网&#xff1a; www.icisac.org 简介 在国家大力推动高质量发展与创新驱动战略的背景下&#xff0c;智能制造与自动化控制行业正迎…...

GGUF、Transformer、AWQ 详解与关系梳理

GGUF、Transformer、AWQ 详解与关系梳理 一、核心概念解析 Transformer 定义 &#xff1a;2017 年 Google 提出的基于自注意力机制的神经网络架构&#xff0c;是大语言模型的通用基础架构。功能 &#xff1a;用于文本生成、翻译、问答等任务&#xff0c;如 BERT、GPT 系列、…...

学习笔记|arduino uno r3|DS1307时钟芯片|Atmega328P| 设置时间|读取时间|无源晶振:DS1307时钟芯片实验

目录 芯片pinout&#xff1a; 实验器件&#xff1a; 实验连线 解决AVR 架构不支持 printf() 方法 使用GetTimeAndDate.ino设置时间&#xff1a; 使用SetTimeAndDate.ino设置时间&#xff1a; 芯片pinout&#xff1a; DS1307 是美国 DALLAS 公司推出的 I 总线接口实时时钟芯…...

Linux--进程创建

进程创建 写时拷贝&#xff08;时间换空间&#xff09; 更新页表项权限为只读----子进程写入----触发系统错误系统缺页中断&#xff0c;系统开始检测&#xff0c;系统判断写入区域是数据区还是代码区&#xff0c;如果是代码区就终结进程&#xff0c;如果是数据区就进行写时拷贝…...

MySQL 创建用户,建库,建表

以下是在 MySQL 中创建用户、数据库、表的详细操作步骤&#xff1a; 一、登录 MySQL -- 使用 root 用户登录&#xff08;需替换为实际密码&#xff09; mysql -u root -p输入密码后回车&#xff0c;进入 MySQL 命令行界面。 二、创建数据库 -- 创建名为 test_db 的数据库&a…...

成都国际数字影像产业园,文创产业运营新典范深度解析​

成都国际数字影像产业园位于成都市蓉北商圈金牛片区福堤路99号&#xff0c;是金牛区政府与树莓集团携手打造的省级“文化科技”融合示范园区。该产业园已成为西南地区乃至全国数字影像产业的一颗璀璨明珠&#xff0c;其成功运营模式堪称文创产业运营的新典范。 产业定位与资源…...

33、如果 std::vector 的元素是指针,需要注意什么?

对 std::vector 元素为指针的情况&#xff0c;需要注意以下几点&#xff1a; 内存管理&#xff1a; 如果 std::vector 存储的是原始指针&#xff0c;那么仅仅清空 vector 或者让 vector 被销毁&#xff0c;并不会释放指针所指向的内存。因此&#xff0c;需要确保在 vector 被销…...

Docker 速通(总结)

Docker 命令 镜像 docker build: 从 Dockerfile 构建镜像。docker pull: 从 Docker Hub 或其他注册表拉取镜像。docker push: 将镜像推送到 Docker Hub 或其他注册表。docker images: 列出本地镜像。docker rmi: 删除本地镜像。 容器 docker run: 创建并启动一个新的容器。…...

算法训练篇06--力扣611.有效三角形的个数

目录 1.题目链接&#xff1a;611.有效三角形的个数 2.题目描述&#xff1a; 3.解法一&#xff1a;(暴力解法)(会超时)&#xff1a; 4.解法二(排序双指针) 1.题目链接&#xff1a;611.有效三角形的个数 2.题目描述&#xff1a; 给定一个包含非负整数的数组 nums &#xf…...

Gin框架学习

一.介绍 Gin是一个用Go语言编写的web框架。它是一个类似于martini但拥有更好性能的API框架, 由于使用了httprouter&#xff0c;速度提高了近40倍。 如果你是性能和高效的追求者, 你会爱上Gin。 下载 go get -u github.com/gin-gonic/gin 二.Gin示例 学习的时候&#xff0c;写在…...

青少年编程与数学 02-011 MySQL数据库应用 07课题、表的操作

青少年编程与数学 02-011 MySQL数据库应用 07课题、表的操作 一、数据库表&#xff08;Table&#xff09;二、创建表语法格式示例注意事项 三、字段的命名规则基本规则命名规范建议示例 四、字段数据类型数值类型字符串类型日期和时间类型其他类型 五、选择合适的数据类型1. **…...

【详细解决】pycharm 终端出现报错:“Failed : 无法将“Failed”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

昨天在终端一顿操作后突然打开pycharm时就开始报错&#xff1a; 无法将“Failed”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确保路径正确&#xff0c;然后再试一次。 所在位置 行:1 字符: 1 Failed to act…...

AcWing 839:模拟堆 ← multiset + unordered_map

【题目来源】 https://www.acwing.com/problem/content/841/ 【题目描述】 维护一个集合&#xff0c;初始时集合为空&#xff0c;支持如下几种操作&#xff1a; 1. I x&#xff0c;插入一个数 x&#xff1b; 2. PM&#xff0c;输出当前集合中的最小值&#xff1b; 3. DM&#…...

cmake教程

CMake 是一个跨平台的自动化构建系统&#xff0c;广泛用于管理软件构建过程。它使用 CMakeLists.txt 文件来配置项目的构建过程&#xff0c;并生成适用于不同编译器和操作系统的构建文件&#xff08;如 Makefile、Visual Studio 项目文件等&#xff09;。以下是一个简单的 CMak…...

小蓝的括号串1(栈,蓝桥云课)

问题描述 小蓝有一个长度为 nn 的括号串&#xff0c;括号串仅由字符 ( 、 ) 构成&#xff0c;请你帮他判断一下该括号串是否合法&#xff0c;合法请输出 Yes &#xff0c;反之输出 No 。 合法括号序列&#xff1a; 空串是合法括号序列。 若 ss 是合法括号序列&#xff0c;则 (…...

软考系统架构设计师考试学习和考试的知识点大纲,覆盖所有考试考点

以下是软考系统架构设计师考试的知识点大纲&#xff0c;覆盖所有官方考点&#xff0c;分为基础知识、核心技术、系统设计、案例分析、论文写作五大模块&#xff0c;帮助系统性学习和备考&#xff1a; 一、基础知识模块 计算机组成与体系结构 计算机硬件组成&#xff08;CPU、内…...

车载以太网网络测试-18【传输层-DOIP协议-1】

目录 1 摘要2 DOIP协议的概述2.1 DOIP协议背景2.2 ISO 13400概述 3 DOIP报文的帧结构以及实例3.1 DOIP报文帧结构3.2 实例示例 总结 1 摘要 在汽车网络通信中&#xff0c;诊断扮演了非常重要的角色&#xff0c;无论是故障诊断、整车下线配置&#xff0c;还是ECU的软件更新、远…...

密码学(Public-Key Cryptography and Discrete Logarithms)

Public-Key Cryptography and Discrete Logarithms Discrete Logarithm 核心概念&#xff1a;离散对数是密码学中一个重要的数学问题&#xff0c;特别是在有限域和循环群中。它基于指数运算在某些群中是单向函数这一特性。也就是说&#xff0c;给定一个群 G G G和一个生成元 …...

自然语言处理|深入解析 PEGASUS:从原理到实践

一、引言 在信息爆炸的时代&#xff0c;互联网上的文本数据以极快的速度增长。无论是新闻资讯、学术论文、社交媒体动态&#xff0c;还是各类报告文档&#xff0c;我们每天接触到的文字信息量巨大。如何快速、准确地提取关键内容成为一项重要任务。文本摘要技术通过将长篇文本…...

矩阵指数的定义和基本性质

1. 矩阵指数的定义 矩阵指数 e A t e^{\boldsymbol{A}t} eAt 定义为幂级数的形式&#xff1a; e A t ∑ k 0 ∞ ( A t ) k k ! e^{\boldsymbol{A}t} \sum_{k0}^\infty \frac{(\boldsymbol{A}t)^k}{k!} eAtk0∑∞​k!(At)k​ 当 A \boldsymbol{A} A 为 n n n \times n …...

react 技术栈请问该如何优化 DOM 大小

针对 React 应用中 DOM 大小过大 的问题&#xff0c;以下是详细的优化方案和具体操作步骤&#xff0c;帮助你提升 Lighthouse 性能评分和用户体验&#xff1a; 一、问题根源分析 DOM 大小过大&#xff08;如超过 1500 个节点或深度超过 32 层&#xff09;会导致&#xff1a; …...

redis,tar.gz安装后,接入systemctl报错解决

1. WARNING Memory overcommit must be enabled! 这种报错&#xff0c;有两种解决方法 1.1 修改系统参数 编辑 /etc/sysctl.conf 文件&#xff0c;设置 overcommit_memory 为 1 vm.overcommit_memory 11.2 修改redis的最大使用内存 修改配置文件 redis.conf maxmemory 1g…...

YOLOv5部署全场景问题解决方案手册(2025版)

YOLOv5部署全场景问题解决方案手册&#xff08;2025版&#xff09; 文章目录 YOLOv5部署全场景问题解决方案手册&#xff08;2025版&#xff09;[TOC]一、环境配置问题1.1 CUDA与PyTorch版本冲突1.2 依赖库缺失问题 二、模型转换问题2.1 ONNX导出失败2.2 TensorRT转换问题 三、…...

Canal 解析与 Spring Boot 整合实战

一、Canal 简介 1.1 Canal 是什么&#xff1f; Canal 是阿里巴巴开源的一款基于 MySQL 数据库增量日志解析&#xff08;Binlog&#xff09;中间件&#xff0c;它模拟 MySQL 的从机&#xff08;Slave&#xff09;行为&#xff0c;监听 MySQL 主机的二进制日志&#xff08;Binl…...