VUE3-form表单保存附件与基本信息
element-ui代码
<el-dialog :title="上传附件" v-model="dialogAdds.visible" width="500px" append-to-body>
<el-form-item label="唯一标识">
<dict-tag v-if="form.groupId" :options="unique_identification" :value="form.identification" />
<el-input v-else v-model="form.identification" disabled style="width:260px;" />
</el-form-item>
<el-form-item label="设备" prop="file">
<template #default>
<div>
<div>
<label for="fileUpload">
<div class="lBut"><span>选择文件</span></div>
</label>
<div class="el-upload__tip text-red">允许上传.xls .xlsx</div>
<input id="fileUpload" type="file" style="display: none;" accept=".xls,.xlsx" @change="handleFileChange" />
<div class="el-upload__tip text-red" v-if="uploadFileName">{{ uploadFileName }}</div>
</div>
</div>
</template>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitFormMul">确 定</el-button>
<el-button @click="cancelAdds">取 消</el-button>
</div>
</template>
</el-dialog>
js代码
<script setup lang="ts">
import axios from 'axios';
const dialogAdds = reactive<DialogOption>({
visible: false,
title: ''
});
// 文件上传
const handleFileChange = (event:any) => {
if(event.target.files[0].size > 1024*1024*40){
return proxy?.$modal.msgSuccess("上传文件不能大于40M");
}
// 附件名称
uploadFileName.value=event.target.files[0].name;
form.value.file= event.target.files[0];
}
// 保存操作
const submitFormMul = ()=>{
deviceFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
const result=await axios.post(import.meta.env.VITE_APP_BASE_API+'/device/device/deviceImportByExcel', form.value, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
if(result.data.code==601){
proxy?.$modal.alertErrorTitle(result.data.data,"导入错误提示");
}
// 重置
uploadFileName.value='';
dialogAdds.visible = false;
buttonLoading.value = false;
}
});
}
</script>
style样式
<style>
.lBut{
width: 87px;
height: 32px;
font-size: 14px;
line-height: 1.15;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
padding: 8px 10px;
margin-left: 2px;
transition: all 0.5s;
white-space: nowrap;
background-color: #409eff;
color: white;
border: 1px solid #409eff;
}
</style>
结果展示

相关文章:
VUE3-form表单保存附件与基本信息
element-ui代码 <el-dialog :title"上传附件" v-model"dialogAdds.visible" width"500px" append-to-body> <el-form-item label"唯一标识"> <dict-tag v-if"form.groupId" :options"unique_identifica…...
无线网络安全技术基础
无线网络安全技术基础 无线网络安全风险和隐患 随着无线网络技术广泛应用,其安全性越来越引起关注.无线网络的安全主要有访问控制和数据加密,访问控制保证机密数据只能由授权用户访问,而数据加密则要求发送的数据只能被授权用户所接受和使用。 无线网络在数据传输时以微波进…...
sheng的学习笔记-docker部署Greenplum
目录 docker安装gp数据库 mac版本 搭建gp数据库 连接数据库 windows版本 搭建gp数据库 连接数据库 docker安装gp数据库 mac版本 搭建gp数据库 打开终端,输入代码,查看版本 ocker search greenplum docker pull projectairws/greenplum docker…...
【投稿资讯】区块链会议CCF A -- SP 2025 截止6.6、11.14 附录用率
会议名称:46th IEEE Symposium on Security and Privacy( S&P) CCF等级:CCF A类学术会议 类别:网络与信息安全 录用率:2023年 195/1147,2024年录用了17篇和区块链相关的论文 Topics of interest inc…...
C++哪些函数不能被声明为虚函数
在C中,某些函数不能被声明为虚函数。下面详细解释哪些函数不能被声明为虚函数,并通过代码示例进行说明。 C哪些函数不能被声明为虚函数 不能声明为虚函数的函数示例代码及解释一、构造函数不能是虚函数二、静态成员函数不能是虚函数三、友元函数不能是虚…...
vue中数据已经改变了,但是table里面内容没更新渲染!
解决方案: 给table或者el-table标签上添加一个动态key值,只要数据发生改变,key值变动一下即可 标签上: :key“timeStamp” 初始data:timeStamp:0, 更新数据:this.timeStamp 这样每次更新数据ÿ…...
头歌实践教学平台:Junit实训入门篇
第2关:Junit注解 任务描述 给出一个带有注解的Junit代码及其代码打印输出,要求学员修改注解位置,让输出结果变为逆序。 相关知识 Junit注解 Java注解((Annotation)的使用方法是" 注解名" 。借助注解&a…...
matlab使用教程(80)—修改图形对象的透明度
1.更改图像、填充或曲面的透明度 此示例说明如何修改图像、填充或曲面的透明度。 1.1坐标区框中所有对象的透明度 透明度值称为 alpha 值。使用 alpha 函数设置当前坐标区范围内所有图像、填充或曲面对象的透明度。指定一个介于 0(完全透明)和 1&#x…...
mysql bin 日志转成sql
首先确定mysql binlog 服务开启 SHOW VARIABLES LIKE log_bin; 找到binlog日志 find / -name mysql-bin.* -type f 下载下来 本地找到mysql安装位置的bin目录 在窗口路径处直接输入cmd 执行 mysqlbinlog --no-defaults --base64-outputdecode-rows -v --start-datetime&…...
河南道路与桥梁乙级资质申请:注册证书与职称证书准备
在河南道路与桥梁乙级资质申请中,注册证书与职称证书的准备是不可或缺的环节。以下是关于如何准备这些证书的一些关键步骤和要点: 明确所需证书类型: 注册证书:这通常指的是相关专业的注册工程师证书,如注册土木工程师…...
3D工业视觉
前言 本文主要介绍3D视觉技术、工业领域的应用、市场格局等,主要技术包括激光三角测量、结构光、ToF、立体视觉。 一、核心内容 3D视觉技术满足工业领域更高精度、更高速度、更柔性化的需求,扩大工业自动化的场景。 2D视觉技术基于物体平面轮廓&#…...
使用auth_basic模块进行基础认证
在建立和维护Web服务器时,身份认证是一个至关重要的环节。Nginx作为一个高性能的Web服务器,支持许多认证方法,其中较为简单和常用的一种即是基础身份认证(Basic Authentication),这需要借助auth_basic模块实…...
深度解析物联网平台:优化数据点位管理的实战策略
策略管理 策略,作为在物联网平台数据点位创建过程中可设定的规则,涵盖了多个重要方面,策略是在创建点位的时候,可以设置的规则,包括存储策略、告警策略、通知策略以及联动策略。这些策略都是通过专门的列表页面进行集…...
Spring常见问题
如何理解spring属于低侵入式设计? 在代码中不需要写明具体依赖对象,在运行时进行自动注入,降低了组件的耦合依赖的是接口,而接口的实现类具有拓展性 Spring IOC 实现了什么功能,谈谈你对IOC的理解。 负责创建对象&…...
MiniMax Golang2轮面试,期望薪资25K
一面 1、自我介绍 2、简单介绍一下你们成立了这个finance的财务中台之后,整体的服务架构是怎么样的吗? 3、就你提到的预算池项目,展开说说背景,以及解决了怎么样的问题? 4、为什么采用针对T-1订单的异步计算方案&a…...
MyBatis系统学习篇 - MyBatis的缓存
MyBatis的缓存实现原理主要基于三级缓存机制,包括一级缓存(本地缓存)、二级缓存(全局缓存)和三级缓存(跨会话缓存)。这个缓存在我们实际开发中可以避免我们查询重复的数据,在一定程度…...
K-means聚类模型
目录 1.定义 2.K-means聚类模型的优点 3.K-means聚类模型的缺点 4.K-means聚类模型的应用场景 5.对K-means聚类模型未来的展望 6.小结 1.定义 什么是 K-means 聚类模型?K-means 聚类模型是一种无监督学习算法,用于将数据划分为不同的组或簇&#…...
免费分享一套微信小程序旅游推荐(智慧旅游)系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】,帅呆了~~
大家好,我是java1234_小锋老师,看到一个不错的微信小程序旅游推荐(智慧旅游)系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序旅游推荐(智慧旅游)系统(SpringBoot后端Vue管理端) Java毕业设计…...
Matlab 2023b学习笔记1——界面认识
下载安装好Matlab后,可以看到如下界面: 可以看到,这时只有命令行窗口。我们在上方工具栏中选择“布局”—— “默认”,即可看到左右两边多出来了“当前文件夹”与“工作区”两栏。 一、当前文件夹界面 这个界面显示的是当前目录下…...
C++ sort排序的总和应用题
第1题 sort排序1 时限:1s 空间:256m 输入n个数,将这n个数从小到大排序,输出。 输入格式 第1行,一个正整数n(n<100) 第2行,n个正整数,小于100 输出格式 n个整…...
树莓派4B避坑指南:手把手教你安装兼容的Miniconda 4.9.2(aarch64版)
树莓派4B避坑指南:手把手教你安装兼容的Miniconda 4.9.2(aarch64版) 树莓派4B作为一款高性能的单板计算机,凭借其强大的aarch64架构和丰富的扩展能力,成为众多开发者和爱好者的首选。然而,在安装Miniconda这…...
2026年三维扫描仪选购指南:专业厂家如何选,这几点是关键
在工业4.0与智能制造浪潮的推动下,三维扫描技术已成为产品设计、逆向工程、质量检测等领域的核心工具。面对市场上琳琅满目的品牌与型号,如何选择一台真正适合自身需求、性能可靠的三维扫描仪,成为众多工程师、设计师和企业决策者面临的难题。…...
用STM32F103C8和5路红外模块,我花了一个周末做了个能自己拐弯的小车(附完整代码)
从零打造智能循迹小车:STM32F103C8与红外模块的实战指南 看着桌上散落的电子元件逐渐组合成一个能自主行动的小车,这种成就感是任何现成玩具都无法比拟的。本文将带你完整经历一次基于STM32F103C8和五路红外模块的智能小车开发过程,无需复杂算…...
新手零基础入门:在快马平台用AI生成你的首个龙虾部署项目
新手零基础入门:在快马平台用AI生成你的首个龙虾部署项目 作为一个刚接触容器化开发的新手,第一次听说"龙虾部署"这个概念时,我完全摸不着头脑。后来才知道,这其实就是Docker容器化部署的一种形象说法。今天我想分享一…...
百度网盘Mac版下载加速引擎:突破限速的完整优化指南
百度网盘Mac版下载加速引擎:突破限速的完整优化指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 当你面对100KB/s的下载速度,…...
自动驾驶RL微调实战:如何用MotionLM提升模型可靠性(附Waymo数据集配置)
自动驾驶RL微调实战:如何用MotionLM提升模型可靠性(附Waymo数据集配置) 在自动驾驶技术快速迭代的今天,强化学习(RL)微调已成为提升模型可靠性的关键手段。不同于传统模仿学习(IL)的…...
本地部署openclaw(window环境下)不用花钱买token版
步骤一:参考视频到安装 openclaw 前就行(剩下的步骤和博主不太样) 步骤 2 1、免费注册一个 NVIDIA NIM 账户: 【点击前往】 登入后在设置中心生成你自己的API Keys ,过期时间选择永不过期,目前可以直接免…...
新手避坑指南:在Ubuntu 20.04 ROS Noetic下搞定宇树Z1机械臂Gazebo仿真(附依赖安装全流程)
宇树Z1机械臂ROS仿真全流程避坑指南:从零搭建到Gazebo控制 第一次在Ubuntu 20.04上配置宇树Z1机械臂的ROS Noetic仿真环境时,我几乎踩遍了所有可能的坑——依赖版本冲突、编译报错、环境变量配置错误...如果你也在经历类似的痛苦,别担心&…...
快速体验WAN2.2文生视频:ComfyUI预置工作流,2分钟生成测试视频
快速体验WAN2.2文生视频:ComfyUI预置工作流,2分钟生成测试视频 1. 为什么选择WAN2.2文生视频工作流 如果你正在寻找一个简单易用、效果出色的文生视频工具,WAN2.2文生视频工作流绝对值得一试。这个预置在ComfyUI中的工作流,让视…...
Asian Beauty Z-Image Turbo基础教程:如何修改默认提示词实现‘旗袍少女’‘水墨仕女’风格
Asian Beauty Z-Image Turbo基础教程:如何修改默认提示词实现‘旗袍少女’‘水墨仕女’风格 想用AI画出充满东方韵味的“旗袍少女”或“水墨仕女”,但试了很多模型,出来的效果总是不对味?要么人物五官太西化,要么画面…...
