上传excel文件

文件上传,其实就是用el-upload组件来实现上传,只是换了样式,和图片上传一样

<el-form-item label="选择文件"><el-input placeholder="请选择文件" v-model="form.file" disabled style="width: 450px"><el-upload slot="append" :show-file-list="false" :headers="headers" accept=".xlsx" action="/api/follow-admin/data-import-info/import" :before-upload="handleUploadBefore" :on-success="handleUploadSuccess"><el-button size="small" type="primary">点击上传</el-button></el-upload></el-input><p style="font-size: 12px; color: #e6a23c">文件大小不可大于10M且必须按照模版格式进行上传,仅支持xls/xlsx格式文件</p></el-form-item>// 上传前事件handleUploadBefore (file) {const isLt2M = file.size / 1024 / 1024 < 1if (!isLt2M) {this.$message.warning('文件大小不能超过 1M')}return isLt2M},// 上传成功处理handleUploadSuccess (res) {if (res.code === 200) {this.$message.success('导入成功')this.form.file = res.datathis.getTableDataList()} else {this.$message.error(res.msg)}}<style lang="less" scoped>
.resident-export-data-manage {.table-bg {padding: 20px !important;min-height: auto !important;::v-deep .el-form {.el-form-item {&:nth-child(2) {.el-form-item__content {.el-input {.el-input-group__append {background-color: #136fe0 !important;span {color: #fff;}}}}}}}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/68071.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CCF考试:201703-1 分蛋糕(java代码)

1、【问题描述】 小明今天生日&#xff0c;他有n块蛋糕要分给朋友们吃&#xff0c;这n块蛋糕&#xff08;编号为1到n&#xff09;的重量分别为a1, a2, …, an。小明想分给每个朋友至少重量为k的蛋糕。小明的朋友们已经排好队准备领蛋糕&#xff0c;对于每个朋友&#xff0c;小明…

用Node.js吭哧吭哧撸一个运动主页

简单唠唠 某乎问题&#xff1a;人这一生&#xff0c;应该养成哪些好习惯&#xff1f; 问题链接&#xff1a;https://www.zhihu.com/question/460674063 如果我来回答肯定会有定期运动的字眼。 平日里也有煅练的习惯&#xff0c;时间久了后一直想把运动数据公开&#xff0c;…

springboot第35集:微服务与flutter安卓App开发

Google Playplay.google.com/apps/publis…[1]应用宝open.qq.com/[2]百度手机助手app.baidu.com/[3]360 手机助手dev.360.cn/[4]vivo 应用商店dev.vivo.com.cn/[5]OPPO 软件商店&#xff08;一加&#xff09;open.oppomobile.com/[6]小米应用商店dev.mi.com/[7]华为应用市场dev…

spring-boot-maven-plugin插件详解

一、 为什么Spring Boot项目自带这个插件 当我们在SpringBoot官方下载一个脚手架时,会发现pom.xml会自带spring-boot-maven-plugin插件 那为什么会自带这个插件呢&#xff1f; 我们知道Spring Boot项目&#xff0c;是可以通过java -jar 包名启动的 打包命令 mvn clean pac…

什么是Milvus

原文出处&#xff1a;https://www.yii666.com/blog/393941.html 什么是Milvus Milvus 是一款云原生向量数据库&#xff0c;它具备高可用、高性能、易拓展的特点&#xff0c;用于海量向量数据的实时召回。 Milvus 基于 FAISS、Annoy、HNSW 等向量搜索库构建&#xff0c;核心是…

Jmeter快捷方式和应用图标设置

很多人在安装Jmeter,安装到本机却没有icon&#xff0c;每次使用的时候&#xff0c;每次打开应用都要找目录&#xff0c;不太方便。 【解决问题】 使用bin路径下的一个.bat文件&#xff0c;创建快捷方式。 【操作步骤】 Step1、将Jmeter 安装bin路径下的jmeter.bat 发送快捷方…

使用路由器更改设备IP_跨网段连接PLC

在一些设备IP已经固定,但是需要采集此设备的数据,需要用到跨网段采集 1、将路由器WAN&#xff08;外网拨号口&#xff09;设置为静态IP 2、设置DMZ主机&#xff0c;把DMZ主机地址设置成跨网段的PLC地址 DMZ主机 基本信息. DMZ (Demilitarized Zone)即俗称的非军事区&#xff0…

【MySQL】表的内连和外连

本期我们来谈谈表的连接 目录 一、内连接 二、外连接 2.1 左外连接 2.2 右外连接 一、内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选&#xff0c;我们上期学习的复合查询都是内连接&#xff0c;也是在开发过程中使用的最多的连接查询 使用内连接时…

java实现docx,pdf文件动态填充数据

一&#xff0c;引入pom 根据需求引入自己所需pom org.apache.poi poi 4.1.1 org.apache.poi poi-ooxml 4.1.1 org.jxls jxls 2.6.0 ch.qos.logback logback-core org.jxls jxls-poi 1.2.0 fr.opensagres.xdocreport fr.opensagres.xdocreport.core 2.0.2 fr.opensagres.xdocrep…

【小梦C嘎嘎——启航篇】string介绍以及日常使用的接口演示

【小梦C嘎嘎——启航篇】string 使用&#x1f60e; 前言&#x1f64c;C语言中的字符串标准库中的string类string 比较常使用的接口对上述函数和其他函数的测试代码演示&#xff1a; 总结撒花&#x1f49e; &#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的座右…

docker pull 设置代理 centos

On CentOS the configuration file for Docker is at: /etc/sysconfig/docker 用 root 权限打开 text editor sudo gedit 注意 加引号 Adding the below line helped me to get the Docker daemon working behind a proxy server: HTTP_PROXY“http://<proxy_host>:&…

Python-OpenCV中的图像处理-物体跟踪

Python-OpenCV中的图像处理-物体跟踪 物体跟踪 物体跟踪 现在我们知道怎样将一幅图像从 BGR 转换到 HSV 了&#xff0c;我们可以利用这一点来提取带有某个特定颜色的物体。在 HSV 颜色空间中要比在 BGR 空间中更容易表示一个特定颜色。在我们的程序中&#xff0c;我们要提取的…