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

Vue3 上传后的文件智能预览（实战体会）

news 来源：原创 2025/6/22 12:53:20

前言

🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF

爬虫神器，无代码爬取，就来：bright.cn

此处的基本知识涉及较少，主要以Demo的形式供大家学习，从实战中触发

本身url是在线链接且是以数组的形式存在

开源项目来源：https://gitee.com/zhijiantianya/ruoyi-vue-pro

1. Demo1

本身一开始以Minio的形式上传，以文件的形式进行命名：

在这里插入图片描述

后续用户需要一个个点击才能看到是什么文件

 <el-form-item label="单证附件" prop="imgPath"><UploadFile v-model="formData.imgPath" limit="10" /></el-form-item>

把 imgPath 按逗号分割为数组
遍历数组，每个链接：
如果是图片（比如后缀是 .jpg、.png 等），就渲染成 <el-image>
如果不是图片，就渲染成带下载链接的文件名

示例的Demo如下：

<template><div class="file-preview-list"><divv-for="(item, index) in fileList":key="index"class="preview-item"><el-imagev-if="isImage(item)":src="item":preview-src-list="[item]"fit="cover"style="width: 100px; height: 100px; margin-right: 10px;"><template #error><div style="font-size: 12px; color: #999;">加载失败</div></template></el-image><av-else:href="item"target="_blank"style="color: #409EFF; text-decoration: underline;">文件 {{ index + 1 }}</a></div></div>
</template><script setup>
import { computed } from 'vue';const props = defineProps({modelValue: String
});const fileList = computed(() => {return props.modelValue? props.modelValue.split(',').map(item => item.trim()): [];
});const isImage = (url) => {return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url);
};
</script><style scoped>
.file-preview-list {display: flex;flex-wrap: wrap;gap: 10px;
}
.preview-item {display: flex;align-items: center;
}
</style>

组件这样使用：

<el-form-item label="单证附件" prop="imgPath"><UploadFile v-model="formData.imgPath" limit="10" /><UploadPreview v-model="formData.imgPath" />
</el-form-item>

后续由于图片有些过大，对应以正在加载的形式呈现：

<template><div class="file-preview-list"><divv-for="(item, index) in fileList":key="index"class="preview-item"><el-imagev-if="isImage(item)":src="item":preview-src-list="[item]"fit="cover"style="width: 100px; height: 100px; margin-right: 10px;"><template #placeholder><divstyle="display: flex; align-items: center; justify-content: center; height: 100%; color: #aaa; font-size: 12px;">正在加载...</div></template><template #error><div style="font-size: 12px; color: #999;">加载失败</div></template></el-image><av-else:href="item"target="_blank"style="color: #409EFF; text-decoration: underline;">文件 {{ index + 1 }}</a></div></div>
</template><script setup>
import { computed } from 'vue';const props = defineProps({modelValue: String
});const fileList = computed(() => {return props.modelValue? props.modelValue.split(',').map(item => item.trim()): [];
});const isImage = (url) => {return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url);
};
</script><style scoped>
.file-preview-list {display: flex;flex-wrap: wrap;gap: 10px;
}
.preview-item {display: flex;align-items: center;
}
</style>

✅ 推荐结构（用 el-row + 两个 el-col）
原来的结构是把所有内容都放在了一个 el-form-item 里面，这样不太好控制布局

建议改成下面这样：

<el-row><!-- 左侧：上传控件 --><el-col :span="12"><el-form-item label="单证附件" prop="imgPath"><UploadFile v-model="formData.imgPath" limit="10" /></el-form-item></el-col><el-col :span="12"><div style="margin-bottom: 8px; font-weight: bold;">附件预览</div><UploadPreview v-model="formData.imgPath" /></el-col>
</el-row>

最终截图如下：

在这里插入图片描述

2. Demo2

另外一种呈现的方式如下：

<el-table-column label="照片" align="center" prop="imgPath" width="500" fixed="left"><template #default="{ row }"><div v-if="row.imgPath && row.imgPath.length > 0" class="damage-images"><el-imagev-for="(img, index) in row.imgPath":key="index"class="h-80px w-80px"lazy:src="img":preview-src-list="row.imgPath"preview-teleportedfit="cover"/></div><div v-else class="no-image">无图片</div></template>
</el-table-column>

Vue3 上传后的文件智能预览（实战体会）

目录前言1. Demo12. Demo2 前言 🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF 爬虫神器，无代码爬取，就来：bright.cn 此处的基本知识涉及较少，主要以Demo的形式供大…...

编程日记 2025/6/22 12:53:20

面试常问问题：Java基础篇

一、面向对象编程（OOP） 四大特性封装、继承、多态、抽象的具体实现与区别？ 抽象类与接口的区别？何时选择抽象类或接口？ 重写（Override）和重载（Overload）的规则与区别&…...

编程日记 2025/6/22 12:22:21

测试流程?

需求分析组织需求评审会议，邀请开发团队和测试团队参与。产品经理详细讲解需求，确保开发和测试人员对需求理解一致。测试计划分配测试人员：根据项目需求和测试人员的技能，分配测试任务和范围。确定测试策略：包括测…...

编程日记 2025/6/1 23:12:43

Python命名参数的使用

Python脚本传递参数的方式有： 使用sys.argv按照先后的顺序传入对应的参数使用argparse包加载和解析传递的命名参数下面代码是第2中使用的实例： parser argparse.ArgumentParser(description参数使用说明) parser.add_argument(--time, -t, typestr,…...

编程日记 2025/6/22 12:26:02

赛灵思 XCKU115-2FLVB2104I Xilinx Kintex UltraScale FPGA

XCKU115-2FLVB2104I 是 AMD Xilinx Kintex UltraScale FPGA，基于 20 nm 先进工艺，提供高达 1 451 100 个逻辑单元（Logic Cells），77 721 600 bit 的片上 RAM 资源，以及 5 520 个 DSP 切片（DSP48E…...

编程日记 2025/6/20 15:15:37

使用 Python 项目管理工具 uv 快速创建 MCP 服务（Cherry Studio、Trae 添加 MCP 服务）

文章目录下载Traeuv 工具教程参考我的这篇文章创建 uv 项目main.pyCherry Studio 添加 MCP 服务DeepSeek API配置 DeepSeek API调用 MCP 服务 Trae 添加 MCP 服务添加 MCP创建智能体使用智能体调用 MCP 创建 demo 表查询 demo 表结构信息demo 表插入 2 条测试数据查询 demo 表…...

编程日记 2025/5/30 10:58:49

Docker容器持久化

引言 Docker 容器作为一种轻量级、可移植的虚拟化技术，广泛应用于开发、测试和生产环境中。然而，容器天生是短暂的，意味着它们在生命周期结束后会被销毁，而其中的数据也会随之丢失。为了确保容器中的数据能够持久化，我…...

编程日记 2025/6/20 7:32:59

【信息系统项目管理师】高分论文：论成本管理与采购管理（信用管理系统）

更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录论文1、规划成本管理2、成本估算3、成本预算4、成本控制论文 2019年1月，我作为项目经理参与了 XX基金管理有限公司信用管理系统项目。该项目成本1000万，建设期为1年。通过该项目，XX基金管理有限公司在信用…...

编程日记 2025/6/20 14:30:04

WINDOWS 下Maven 安装及配置教程

Maven 安装及配置教程（Windows）【安装】_windows 安装maven-CSDN博客...

编程日记 2025/5/26 23:36:35

Pycharm（十六）面向对象进阶

一、继承概述： 实际开发中，我们发现很多类中的步分内容是相似的，或者相同的，每次写很麻烦，针对这种情况， 我们可以把这些相似（相同的）部分抽取出来，单独地放到1个类中&…...

编程日记 2025/5/30 22:17:38

实时数据驱动未来：谷云科技CDC实时数据集成平台新版本发布

数据流动的“零延迟时代”已来在数字化转型的浪潮中，数据已成为企业核心资产，而数据的实时流动能力正成为业务竞争力的关键。谷云科技深耕数据集成领域多年，基于对行业痛点的深刻洞察，正式推出CDC实时数据集成平台****全新版本。…...

编程日记 2025/6/2 21:31:57

来自 3D 世界的 JPEG。什么是 glTF？什么是 glb？

定义和简史 GLTF（GL 传输格式）是一种用于存储 3D 场景和模型的文件格式，它非常易于理解（结构是用 JSON 标准编写的），可扩展并易于与现代 Web 技术交互。这种格式可以很好地压缩 3D 场景，并最大限…...

编程日记 2025/6/3 16:07:12

同一页面下动态加载内容的两种方式：AJAX与iframe

iframe iframe能够嵌入另一个 HTML 文档到当前页面。 iframe可以加载任何类型的内容，包括完整的HTML页面。 AJAX 使用 JavaScript 发起 HTTP 请求，通常通过 XMLHttpRequest 或现代浏览器中的 fetch API。可以异步更新页面内容，而不必刷…...

编程日记 2025/6/22 12:12:19

蓝桥杯 6. 冰雹数

冰雹数原题目链接题目描述任意给定一个正整数 N： 如果是偶数，执行：N / 2；如果是奇数，执行：N 3 1。生成的新数字继续执行同样的动作，循环往复。观察发现，这个数字会一会…...

编程日记 2025/5/29 19:00:22

常见网络安全攻击类型深度剖析（三）：DDoS攻击——分类、攻击机制及企业级防御策略

常见网络安全攻击类型深度剖析（三）：DDoS攻击——分类、攻击机制及企业级防御策略在网络安全威胁中，分布式拒绝服务攻击（Distributed Denial of Service, DDoS）堪称“网络流量炸弹”。攻击者通过控制成百上…...

编程日记 2025/6/3 20:41:29

AI与思维模型【76】——SWOT思维模型

一、定义 SWOT思维模型是一种用于分析事物内部和外部因素的战略规划工具。其中，S代表优势（Strengths），是指事物自身所具备的独特能力、资源或特点，这些因素有助于其在竞争中取得优势；W代表劣势&#xff08…...

编程日记 2025/6/22 12:15:58

安全测试之SQL注入深度解析

引言在当今数字化的浪潮中，Web 应用程序如同璀璨星辰般闪耀，承载着海量的信息交互与数据处理。然而，网络安全的阴影也如影随形，SQL 注入攻击便是其中极具威胁的一把利刃。它就像一个隐藏在暗处的黑客，一旦找到应用程序的漏洞，便能肆意篡改、窃取甚至破坏数据库中的重要…...

编程日记 2025/6/21 18:31:42

＜论文＞（谷歌）用于时序链接预测的迁移学习

一、摘要本文介绍谷歌在2025年4月牵头发表的新论文《Transfer Learning for Temporal Link Prediction》。论文主要探讨了动态图中的时间链路预测（TLP）任务，以及如何让模型在不同图之间进行迁移学习。译文： 基于图的链接预测应用…...

编程日记 2025/6/22 12:35:07

高效DCDC电源芯片在运动控制器中的应用：设计考量、性能评估与可靠性分析

摘要随着工业自动化的深入推进，运动控制器作为自动化系统的核心组件，对电源芯片的性能提出了极高要求。高效率DCDC电源芯片凭借其卓越的电能转换效率、优异的负载响应特性和高功率密度，在运动控制器领域得以广泛应用。本文以国科安芯的ASP3…...

编程日记 2025/6/20 5:14:47

AI编程：[体验]从 0 到 1 开发一个项目的初体验

一、开发信息开发时间：1.5-2天工具使用： 不熟练，开发本项目前1天，才简单使用了Cursor的功能功能复杂度： 开发的功能相对简单。页面：2个，登录页面，个人中心页面功能：5个…...

编程日记 2025/6/22 12:41:22

重读《人件》Peopleware -（9-1）Ⅱ办公环境Ⅱ“你在这儿从早上9点到下午5点之间什么都做不成.“（上）

在我们经济的各个领域中，有一个广为流传的观点：“加班是生活的一部分。”这意味着工作量永远无法仅靠正常工作时间来完成。对我们来说，这似乎是一个值得怀疑的说法。确实，在软件行业里，加班是一种常见现象，…...

编程日记 2025/6/22 12:05:14

10前端项目----商品详情页/滚轮行为

商品详情页面商品详情组件发送请求获取相应商品详情信息组件展示数据优化一下路由配置代码滚轮自动置顶商品详情组件路由配置点击商品进行跳转—将Detail组件变成路由组件从商品到详情，肯定需要传参(产品ID)告诉Detail是哪个商品，需要展示哪个商品…...

编程日记 2025/5/18 18:08:39

8. 深入Spring AI：自定义Advisor

1、前言前面大篇幅介绍了关于Spring AI Advisor机制，并介绍了一些常见的内置的advisor。今天我们来自定义有一个Advisor。 2、快速开始要自定义一个属于自己的Advisor，其实很自定义一个AOP一样简单。只需遵循以下步骤：创建一个Advisor类，实现CallAroundAdvisor或Stre…...

编程日记 2025/5/30 20:12:44

常见网络安全攻击类型深度剖析（一）：恶意软件攻击——病毒、蠕虫、木马的原理与防范

常见网络安全攻击类型深度剖析一：恶意软件攻击——病毒、蠕虫、木马的原理与防范在网络安全的威胁体系中，恶意软件（Malware）是最古老、最常见的攻击形式之一。从早期的计算机病毒到如今的高级木马程序，恶意软件始终是…...

编程日记 2025/6/3 16:49:33

知识知多少——Matplotlib 库

文章目录 Matplotlib 库详解（新版）一、Matplotlib 核心概念1. 基本架构2. 两种编程接口二、新版 Matplotlib 安装与配置安装配置中文显示（新版推荐方式） 三、基本绘图示例1. 折线图2. 柱状图（新版样式） 四…...

编程日记 2025/5/30 13:11:06

Linux实验课

一.ln指令使用 ln是link的缩写,在Linux中 ln 命令的功能是为某一个文件在另外一个位置建立一个同步的链接，当我们需要在不同的目录，用到相同的文件时，我们不需要在每一个需要的目录下都放一个必须相同的文件，我们只要在某个固定的…...

编程日记 2025/6/22 12:23:27

pyhton下载地址 https://www.python.org/downloads/ pycharm下载地址 https://www.jetbrains.com/pycharm/download/?section=mac 安装步骤下载python3的包之前，要先安装相关的依赖包，用于下载编译python3： yum -y install zlib-devel bzip2-devel openssl-devel nc…...

编程日记 2025/6/20 7:48:13

【EDA】Multi-Net Routing（多网布线）

第六章：Multi-Net Routing（多网布线） 在VLSI物理设计中，多网布线（Multi-Net Routing）的目标是同时为多个网络（Nets）规划路径，避免布线资源冲突（如导线重叠、…...

编程日记 2025/5/28 22:00:45

1块智能电表=12路三相监测！ADW600自由拼装，适配多场景，即插即用，改造周期缩短50%！

在这个电力数字化浪潮汹涌的时代，如何高效、精准地管理电能，成为了众多企业关注的焦点。今天，我们要为大家介绍的，正是一款能够引领电能管理新风尚的产品——ADW600智能电表。 ADW600主模块： ADW600从模块：…...

编程日记 2025/6/22 12:29:24

Redis ⑥-string | hash | list

string类型基本介绍 Redis 中的字符串，是直接按照二进制的方式进行存储的。也就是说，在存取的过程中，是不会做任何编码转换的。存的是啥，取的时候就是啥。 Redis 的这个机制，就使得 Redis 非常适合用来存储各种各样的…...

编程日记 2025/5/30 10:58:49

动态规划（1）（java）（面试题）三步问题

题目: 三步问题。有个小孩正在上楼梯，楼梯有 n 阶台阶，小孩一次可以上 1 阶、2 阶或 3 阶。实现一种方法，计算小孩有多少种上楼梯的方式。结果可能很大，你需要对结果模 1000000007。示例 1： 输入：n 3 输…...

编程日记 2025/5/29 3:01:52

实时交互式AIGC系统开发：打造多模态数字人全栈解决方案

一、实时AIGC系统技术挑战 1.1 核心性能指标指标要求实现难点端到端延迟 <500ms 多模块流水线优化多模态同步误差 <100ms 时间戳对齐机制并发处理能力 100 QPS 分布式推理架构生成内容一致性跨模态对齐联合embedding空间 1.2 系统架构设计 [语音输入] → [ASR]…...

编程日记 2025/6/20 11:38:00

tcp 和http 网络知识

1. 请简述TCP和HTTP的定义与基本概念 TCP：即传输控制协议（Transmission Control Protocol），是一种面向连接的、可靠的、基于字节流的传输层通信协议。它为互联网中的数据通信提供稳定的传输机制，在不可靠的IP层之上&a…...

编程日记 2025/6/22 12:18:14

伟世通与火山引擎深度合作前沿AI智能座舱解决方案亮相上海车展

2025年4月24日，上海 —— 全球领先的汽车电子技术供应商伟世通与字节跳动旗下云服务平台火山引擎在2025上海车展联合举办新闻发布会，正式发布基于AI大模型的下一代智能座舱解决方案。该方案深度融合伟世通高性能域控平台与火山引擎豆包大模型的AI能力&am…...

编程日记 2025/6/20 20:59:08

中国250米土壤质地类型数据

土壤质地指土壤中砂粒、粉粒和黏粒的相对含量和组成。根据土壤质地的不同，可以将土壤分为砂土、壤土、黏土等类型。土壤质地对土壤的物理性质（如渗透性、保水性）和化学性质（如养分含量）有重要影响。本数据集是以250米…...

编程日记 2025/6/20 4:27:05

springboot2.x升级到3.x 惨痛经验总结

一、前言（废话） 升级的缘由都是因为：Spring 目录遍历漏洞（CVE-2024-38816） 可参考文章：springboot 修复 Spring Framework 特定条件下目录遍历漏洞（CVE-2024-38816） 然后就趁着工…...

编程日记 2025/5/31 10:23:03

【Python】保持Selenium稳定爬取的方法（防检测策略）

selenium 防检测策略的方法汇总： 合理设置延迟：请求间添加随机延迟 (2-10秒) 限制爬取频率：控制每小时/每天的请求量轮换用户代理：准备至少10个不同的User-Agent 使用住宅代理：优先选择高质量的住宅代理IP 处理验…...

编程日记 2025/6/22 12:39:24

【Linux】进程优先级和进程切换

📝前言： 这篇文章我们来讲讲进程优先级和进程切换： 🎬个人简介：努力学习ing 📋个人专栏：Linux 🎀CSDN主页愚润求学 🌄其他专栏：C学习笔记，C语言入…...

编程日记 2025/6/22 12:33:56

基于 Python（selenium）的今日头条定向爬虫：根据输入的关键词在今日头条上进行搜索，并爬取新闻详情页的内容

该项目能够根据输入的关键词在今日头条上进行搜索，并爬取新闻详情页的内容。一、项目准备 1. 开发环境配置操作系统：支持 Windows、macOS、Linux 等主流操作系统，本文以 Windows 为例进行说明。Python 版本：建议使用 Python 3.8 及以上版本，以确保代码的兼容性和性能。…...

编程日记 2025/6/20 23:31:57

AIDL进程间通信

一、项目开启AIDL 在使用AIDL的模块下build.gradle 文件中添加以下代码 android {...buildFeatures {aidl true} }操作完需要rebuild 二、创建aidl服务接口假设当前所需要的包名为com.jingluo.test_aidl ，那么aidl就需要处于同样的路径下，即如下目录…...

编程日记 2025/6/22 12:51:11

线程同步与互斥

系统11. 线程同步与互斥 1. 线程互斥 1-1 进程线程间的互斥相关背景概念临界资源：多线程执⾏流共享的资源就叫做临界资源临界区：每个线程内部，访问临界资源的代码，就叫做临界区互斥：任何时刻，互斥保证有…...

编程日记 2025/6/21 21:57:15

腾讯一面面经：总结一下

1. Java 中的和 equals 有什么区别？比较对象时使用哪一个 1. 操作符： 用于比较对象的内存地址（引用是否相同）。对于基本数据类型、比较的是值。（8种基本数据类型）对于引用数据类型、比较的是两个引…...

编程日记 2025/6/22 12:16:49

某地农产品交易中心钢网架自动化监测项目

1. 项目简介本项目规划建设现代物流产业园，新建6万平方米仓库，具体为新建3栋钢构仓库2万平方米，2栋砖混结构仓库1万平方米，3栋交易中心2万平方米，改造现有3栋3层砖混结构仓库1万平方米，配备智能化仓库物流…...

编程日记 2025/6/22 12:15:58

PGSql查看表结构以及注释信息

创建视图 CREATE OR REPLACE VIEW dbo.v_sys_tableinfo AS SELECT pc.relname AS tablename, pa.attname AS columnname, pt.typname AS columntype, CASE WHEN pa.attlen > 0 THEN pa.attlen::integer ELSE pa.atttypmod - 4 END AS columnlength, pa.attnotnull …...

编程日记 2025/5/30 23:31:23

C++23 中 constexpr 的重要改动

文章目录 1. constexpr 函数中使用非字面量变量、标号和 goto (P2242R3)示例代码 2. 允许 constexpr 函数中的常量表达式中使用 static 和 thread_local 变量 (P2647R1)示例代码 3. constexpr 函数的返回类型和形参类型不必为字面类型 (P2448R2)示例代码 4. 不存在满足核心常量…...

编程日记 2025/5/31 10:47:22

Linux服务器上mysql8.0+数据库优化

1.配置文件路径 /etc/my.cnf # CentOS/RHEL /etc/mysql/my.cnf # Debian/Ubuntu /etc/mysql/mysql.conf.d/mysqld.cnf # Ubuntu/Debian检查当前配置文件 sudo grep -v "^#" /etc/mysql/mysql.conf.d/mysqld.cnf | grep -v "^$&q…...

编程日记 2025/6/2 8:16:35

深度学习之卷积神经网络入门

一、引言在深度学习蓬勃发展的今天，卷积神经网络（Convolutional Neural Network，简称 CNN）凭借其在图像识别、计算机视觉等领域的卓越表现，成为了人工智能领域的核心技术之一。从手写数字识别到复杂的医学影像分析&a…...

编程日记 2025/5/30 17:00:07

【kafka初学】启动执行命令

接上篇，启动：开两个cdm窗口注意放的文件不要太深或者中文，会报命令行太长的错误启动zookeeper bin\windows\zookeeper-server-start.bat config\zookeeper.properties2. 启动kafka-serve bin\windows\kafka-server-start.bat config\serv…...

编程日记 2025/6/22 4:56:40

MoE架构解析：如何用“分治”思想打造高效大模型？

在人工智能领域，模型规模的扩大似乎永无止境。从GPT-3的1750亿参数到传闻中的GPT-4万亿级规模，每一次突破都伴随着惊人的算力消耗。但当我们为这些成就欢呼时，一个根本性问题愈发尖锐：如何在提升模型能力的同时控制计算成本&#…...

编程日记 2025/6/3 5:08:04

目录

前言

1. Demo1

2. Demo2

相关文章：