使用el-upload添加除预览+删除之外的功能图标按钮-云帆数科

**需求**使用el-upload添加除预览删除之外的添加索引设置小图标按钮实现效果如图分别为未添加图片、添加图片、添加图片为设置限制数量5时添加按钮隐藏结构代码如下el-form-item label图片propgasProductFileRelationVOListel-upload v-model:file-listformMethod.fileListaction#accept.png,.jpg,.jpeglist-typepicture-card:limit5:auto-uploadfalse:on-changeformMethod.fileChange:on-exceedformMethod.handleExceed:classformMethod.fileList.length 5? appl_upload applet_upload: appl_uploadel-iconPlus//el-icon!--自定义文件列表的展示--template #file{ file }divimgclassel-upload-list__item-thumbnail:srcfile.urlalt/spanclassel-upload-list__item-actionsspanclassel-upload-list__item-previewclickdialogObj.openDialog(file)el-iconzoom-in//el-icon/spanspanclassel-upload-list__item-deleteclickformMethod.handleRemove(file)el-iconDelete//el-icon/span/spanspanclassindex_setspan v-iffile.indexPicimg src/assets/images/indexSet.pngalt/索引/spanspan v-elseclickformMethod.setIndex(file)设为索引/span/span/div/templatetemplate #tipdiv stylecolor: #da2d2av-ifformMethod.fileList.length ! 5文件大小不能超过10M/div/template/el-upload/el-form-item//图片放大预览弹框el-dialog title图片v-modeldialogObj.dialogImagVisibleappend-to-bodyimg stylewidth: 100%:srcdialogObj.dialogImageUrlalt//el-dialog2、js相关代码// 表单用到的方法letformMethodreactive({loading:false,// 图片fileList:[],fileChange:(file,fileList){if(![image/jpeg,image/jpg,image/png].includes(file.raw.type)){ElMessage.error(图片格式有误);if(formMethod.fileList.length!0){formMethod.fileList.forEach((item,index){if(item.statusready){formMethod.fileList.splice(index,1);}});}return;}if(file.size/1024/102410){ElMessage.error(图片大小不能超过10MB请重新上传);if(formMethod.fileList.length!0){formMethod.fileList.forEach((item,index){if(item.statusready){formMethod.fileList.splice(index,1);}});}return;}// 上传接口constfdnewFormData();fd.append(file,file.raw);uploadFile(fd).then((res){// 调用后台给的上传图片接口if(res.code200){letindexPic0;if(formMethod.fileList.length1){indexPic1;}formMethod.fileList.push({fileId:res.data.id,id:res.data.id,url:res.data.visitUrl,name:res.data.originalName,filePath:res.data.filePath,visitUrl:res.data.visitUrl,indexPic:indexPic,});if(formMethod.fileList.length!0){formMethod.fileList.forEach((item,index){if(item.statusready){formMethod.fileList.splice(index,1);}});}ElMessage.success(上传成功);}else{formShop.gasProductFileRelationVOList[];formMethod.fileList[];}});},//将图片设为索引setIndex:(file){formMethod.fileList.forEach((item){item.indexPic0;});file.indexPic1;},handleRemove:(file){letindexformMethod.fileList.indexOf(file);if(index!-1){formMethod.fileList.splice(index,1);}},handleExceed:(fileList){constfilefileList[0];file.uidgenFileId();},// 获取图片getPic:(){formShop.gasProductFileRelationVOList[];if(formMethod.fileList.length!0){formMethod.fileList.forEach((item){formShop.gasProductFileRelationVOList.push({id:item.id,fileId:item.fileId,indexPic:item.indexPic,});});}},// 表单提交方法submit:(operType){formMethod.getPic();form.value.validate((valid){if(valid){//表单提交接口}});},});// 图片放大letdialogObjreactive({dialogImagVisible:false,dialogImageUrl:,openDialog:(file){dialogObj.dialogImageUrlfile.url;dialogObj.dialogImagVisibletrue;}});

企业数字化 ERP 产品动态

相关推荐

InnoShop核心实现原理：Repository仓储模式与Translatable多语言模型是怎样工作的

【免费下载链接】innoshop InnoShop is an AI-powered open source e-commerce system built on Laravel 13. It supports multiple AI models and native MCP (Model Context Protocol) for intelligent automation, with multi-language and multi-currency out of the box. … · 2026/11/5 3:21:13

如何用Horizon打造你的专属AI新闻雷达：3步配置终极指南

如何用Horizon打造你的专属AI新闻雷达：3步配置终极指南【免费下载链接】Horizon 📡 Your own AI-powered news radar. Generates daily briefings in English & Chinese. | 用 AI 构建你专属的新闻雷达项目地址: https://gitcode.com/GitHub_Tre… · 2026/11/5 3:21:13

Vorssaint：免费开源 macOS 菜单栏工具，逐应用音量与系统监控配齐

Vorssaint：免费开源 macOS 菜单栏工具，逐应用音量与系统监控配齐【免费下载链接】vorssaint-utils Free and open-source macOS menu bar toolkit. 项目地址: https://gitcode.com/GitHub_Trending/vo/vorssaint-utils Vorssaint 是一款免费、开… · 2026/11/5 3:21:13

三维重建与无感定位技术在危化品园区智能安防中的应用

1. 项目背景与核心价值危化品园区安全管理一直是工业领域的重点难点问题。传统监控手段存在视野盲区、定位精度低、响应滞后等痛点，尤其在复杂立体空间中难以实现全方位无死角覆盖。我们团队研发的这套智能安防管理系统，通过融合三维重建与无感定位两大核… · 2026/11/5 5:49:12

哈希算法原理、应用与工程实践指南

1. 哈希的本质与核心价值哈希（Hash）本质上是一种将任意长度的输入数据映射为固定长度输出的单向函数。就像图书馆的索书号系统——无论书籍多厚多薄，都能被转换成统一格式的编号。这种转换具有三个关键特性：确定性：相同… · 2026/11/5 5:49:12

STM32驱动KSZ8863交换芯片：三端口配置与调试实战

简介：面向STM32嵌入式开发者的KSZ8863交换芯片驱动移植与调试资料，重点解决在缺少硬件I2C外设或引脚受限时，如何通过GPIO模拟I2C总线完成芯片寄存器配置的问题，适合具备一定STM32外设与网络芯片基础的中级开发者参考。压缩包共12个… · 2026/11/5 5:49:12

危化品园区智能安防系统：三维重建与无感定位技术实践

1. 项目背景与核心价值危化品园区作为特殊的高风险作业场所，其安全管理一直是行业痛点。传统监控系统存在三大局限：二维画面缺乏空间感知、人工巡检存在盲区、应急响应依赖经验判断。我们团队研发的这套智能安防系统，通过三维重建构建数字孪生… · 2026/11/5 5:49:12

解决IntelliJ IDEA中MyBatis XML文件SQL背景色问题

1. 问题背景与现象解析作为一名常年使用IntelliJ IDEA进行Java开发的程序员，我最近在编写MyBatis的XML映射文件时遇到了一个视觉干扰问题——文件中的SQL语句部分突然出现了浅色背景高亮（如下图所示）。这种背景色虽然不影响代码功能&#xff… · 2026/11/5 5:49:12

STM32 SD卡FATFS文件系统移植与读写实战

简介：围绕STM32平台读取SD卡并挂载FATFS文件系统，这套实战工程包面向嵌入式初学者、课程设计学生及需要快速验证存储方案的开发者，重点解决SPI/SDIO接口下SD卡初始化、扇区读写与文件系统移植问题。资料将HAL库、FATFS配置、KEIL工程组织与文… · 2026/11/5 5:48:12

双极步进电机控制实战：DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

多智能体协作系统架构设计与实践优化

1. 多智能体协作系统的时代背景2017年Transformer架构的诞生彻底改变了人工智能的发展轨迹。当行业还沉浸在单一大模型带来的性能突破时，Anthropic的研究团队已经将目光投向了更前沿的领域——如何让多个智能体通过协作产生超越单体能力的系统智能。这就像交响乐团中… · 2026/11/5 0:00:39

大模型系统性入门实战指南：从原理到部署微调的全链路路线

提到大模型的系统性入门，我先说个结论：这事真不难，难的是资料太散、路线太多，今天这个框架明天那个工具，新人很容易在“收藏夹吃灰”和“教程看到一半放弃”之间反复横跳。市面上关于大模型的内容少说有几十万篇&#… · 2026/11/5 0:00:39

鸿蒙文件系统沙箱机制解析与开发实践

1. 鸿蒙文件系统沙箱机制深度解析作为一名从Android转向鸿蒙开发的工程师，我深刻体会到文件系统访问是迁移过程中最先遇到的"拦路虎"。在Android上运行良好的文件读写代码，在鸿蒙真机环境却频频出现文件写入后神秘消失或直接抛出权限拒绝错误的… · 2026/11/5 0:00:39

双极步进电机控制实战：DRV8818PWPR与PIC18F86K22驱动调试

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

使用el-upload添加除预览+删除之外的功能图标按钮

相关推荐

了解更多？预约专属演示