上传excel文件

news2024/11/24 8:45:11

文件上传,其实就是用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 < 1
      if (!isLt2M) {
        this.$message.warning('文件大小不能超过 1M')
      }
      return isLt2M
    },
    // 上传成功处理
    handleUploadSuccess (res) {
      if (res.code === 200) {
        this.$message.success('导入成功')
        this.form.file = res.data
        this.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.coloradmin.cn/o/876893.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

自定义批量修改图像位深度

什么是图像位深度&#xff1f;&#xff1f;&#xff1f; 图像位深度(Bit Depth)是指图像中每个像素所占的比特数,它决定了图像能够表示的颜色数量和亮度层级。 简单来说: 位深度越高,每个像素所能表示的颜色数和亮度等级越多。位深度越低,每个像素所能表示的颜色数和亮度等级…

【设备树笔记整理4】内核对设备树的处理

1 从源头分析_内核head.S对dtb的简单处理 1.1 bootloader向内核传递的参数 &#xff08;1&#xff09;bootloader启动内核时&#xff0c;会设置r0&#xff0c;r1&#xff0c;r2三个寄存器&#xff1a; r0一般设置为0;r1一般设置为machine_id (在使用设备树时该参数没有被使用…

809协议nodejs编写笔记(还在更新)

一、总体流程 数据首先通过receiver接受层接收&#xff0c;去掉标识头和标识尾&#xff1b;再进入depacker解包层进行解包&#xff0c;把标识头分解出来并解析&#xff1b;之后发给handler处理层根据不同的消息id选择使用不同的业务逻辑&#xff1b;如果有应答&#xff0c;则通…

Vue2(组件开发)

目录 前言一&#xff0c;组件的使用二&#xff0c;插槽slot三&#xff0c;refs和parent四&#xff0c;父子组件间的通信4.1&#xff0c;父传子 &#xff1a;父传子的时候&#xff0c;通过属性传递4.2&#xff0c;父组件监听自定义事件 五&#xff0c;非父子组件的通信六&#x…

JL701N编译后查看内存使用情况

编译之后&#xff0c;可以在 cpu/br28/tools/sdk.map 中查看实际的使用情况.

MySQL 账号权限

mysql 在安装好后&#xff0c;默认是没有远端管理账号。 一、账号管理 1. 查看账号列表 MySQL用户账号和信息存储在名为 mysql 的数据库中。一般不需要直接访问 mysql 数据库和表&#xff0c;但有时需要直接访问。例如&#xff0c;查看数据库所有用户账号列表时。 USE mysql; …

第G2周:人脸图像生成(DCGAN)

&#x1f368; 本文为[&#x1f517;365天深度学习训练营]内部限免文章&#xff08;版权归 *K同学啊* 所有&#xff09; &#x1f356; 作者&#xff1a;[K同学啊] 1. DCGAN原理 深度卷积对抗网络&#xff08;Deep Convolutional Generative Adversarial Networks, DCGAN&#…

Python的十二道编程题,码住战胜一切

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 一、计算文件大小 import os def get_size(path):size 0l [path]while l:path l.pop()lst os.listdir(path)for name in lst:son_path os.path.join(path,name)if os.path.isfile(son_path):size os.path.getsize(son_…

个人博客系统测试报告

文章目录 一、功能测试1.编写测试用例2.总结测试后发现的BUG 二、UI自动化测试0.搭建测试环境1. 创建公共类2.注册页面UI自动化测试用例编写3.登录页面UI自动化测试用例编写4.用户博客列表页面自动化测试5. 修改个信息页面6. 文章编辑页面7. 设置密保问题发现bug 8. 所有用户文…

QTreeView显示多级多列目录

效果图&#xff1a; 头文件&#xff1a; QStandardItemModel *m_treeMode;源文件 m_treeMode new QStandardItemModel(0,1,this);ui->treeView->setModel(m_treeMode);//控制第一列节点个数int mainLevel 3;for (int i 0; i < mainLevel; i) {QList<QStandar…

【设计模式】非GOF的常见设计模型

结构型模式 系列综述&#xff1a; 来源&#xff1a;该系列是主要参考《大话设计模式》和《设计模式(可复用面向对象软件的基础)》&#xff0c;其他详细知识点拷验来自于各大平台大佬的博客。 总结&#xff1a;设计模式汇总篇 如果对你有用&#xff0c;希望关注点赞收藏一波。 文…

无需停服!PostgreSQL数据迁移工具-NineData

PostgreSQL 是一种备受开发者和企业青睐的关系型数据库&#xff0c;其丰富的数据类型、地理空间负载和强大的扩展能力等特性使其备受欢迎。然而&#xff0c;在企业使用 PostgreSQL 承载应用的过程中&#xff0c;由于业务需要上云、跨云、下云、跨机房迁移、跨地域迁移、数据库版…

C语言学习笔记---操作符详解

C语言程序设计笔记---012 C语言操作符1、算数操作符1.1、算术操作符例程 2、移位操作符2.1、移位操作符例程12.2、移位操作符例程22.3、移位操作符例程3 3、位操作符3.1、位操作符例程13.2、位操作符例程23.3、位操作符例程3 --按位与&1扩展3.4、位操作符例程4 --按位异或^…

使用SpringAop切面编程通过Spel表达式实现Controller权限控制

目录 参考一、概念SpEL表达式 二、开发引入包定义注解定义切面定义用户上下文 三、测试新建Service在方法上注解新建Service在类上注解运行 参考 SpringBoot&#xff1a;SpEL让复杂权限控制变得很简单 一、概念 对于在Springboot中&#xff0c;利用自定义注解切面来实现接口…

LVGL学习笔记 30 - List(列表)

目录 1. 添加文本 2. 添加按钮 3. 事件 4. 修改样式 4.1 背景色 4.2 改变项的颜色 列表是一个垂直布局的矩形&#xff0c;可以向其中添加按钮和文本。 lv_obj_t* list1 lv_list_create(lv_scr_act());lv_obj_set_size(list1, 180, 220);lv_obj_center(list1); 部件包含&…

Linux命令200例:adduser用于创建新用户

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…

求Win11系统virtualbox+vagrant安装MacOS虚拟机

文章目录 一、背景二、素材2.1、virtualboxvagrant 三、问题3.1、安装失败3.2、第二个失败3.3、网络说 四、求助 一、背景 题主&#xff0c;主要是穷&#xff0c;没钱买mac笔记本或相关系统的苹果产品&#xff0c;哈哈&#xff0c;偶尔也有用过MacOS系统&#xff0c;只是还没有…

app专项测试:app弱网测试

目录 弱网测试背景 网络测试要点 弱网测试关注指标 弱网测试工具 fiddler模拟网络延时场景 网络设置参考 Network Emulator Toolkit模拟网络丢包场景&#xff08;windows网络&#xff09; APP弱网测试 弱网使用工具&#xff1a; app弱网测试要点 APP网络测试要点 网络…

OpenCV图像处理——模版匹配和霍夫变换

目录 模版匹配原理实现 霍夫变换霍夫线检测 模版匹配 原理 实现 rescv.matchTemplate(img,template,method)import numpy as np import cv2 as cv import matplotlib.pyplot as pltimgcv.imread(./汪学长的随堂资料/6/模板匹配/lena.jpg) templatecv.imread(./汪学长的随堂资…

一文搞懂Jenkins持续集成解决的是什么问题

1、持续集成的定义 大师 Martin Fowler 是这样定义持续集成的: 持续集成是一种软件开发实战, 即团队开发成员经常集成他们的工作. 通常, 每个成员每天至少集成一次, 也就意味着每天可能发生多次集成. 持续集成并不能消除Bug, 而是让它们非常容易发现和改正. 根据对项目实战的…