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

上传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.lryc.cn/news/125264.html

相关文章:

  • leetcode 力扣刷题哈希表初尝试
  • Docker 本地镜像发布到私有仓库
  • 计算机网络和 Internet 的基本概念
  • 高并发数据抓取实战:使用HTTP爬虫ip提升抓取速度
  • CSS3 中新增了哪些常见的特性?
  • 简单认识excel篇章1
  • CentOS系统环境搭建(九)——centos系统下使用docker部署项目
  • 【科研论文配图绘制】task1 掌握科研绘图的基本知识
  • YAML资源清单
  • 数据分析两件套ClickHouse+Metabase(二)
  • 神经网络基础-神经网络补充概念-20-激活函数
  • 欧拉函数和最大公约数
  • 出牌游戏(game)
  • 踩坑---uni-app中@input 事件不生效
  • Linux命令(66)之tar
  • 零拷贝详解
  • 新能源汽车电控系统
  • Azure概念介绍
  • Zabbix监控MySQL数据库实战
  • 代理模式(Java实现)
  • 炬芯科技发布全新第二代智能手表芯片,引领腕上新趋势!
  • Linux学习之iptables规则基本演示
  • 探索Python编程的技巧:多线程魔法、网络舞台、正则魔法阵与递归迷宫
  • uniapp-微信小程序篇
  • 使用pymupdf实现PDF内容搜索并显示功能
  • Dalsa线阵相机说明(Linea Color GigESeries 2k and 4K)
  • 图神经网络 day2 图的分类
  • CentOS防火墙操作:开启端口、开启、关闭、配置
  • Chromium 如何在c++里面控制扩展加载
  • 分类预测 | MATLAB实现MTBO-CNN多输入分类预测