用element ui上传带参数的文件,并用flask接收

需求

网页需要实现上传一个csv文件,并携带两个表单的参数给后端

方法

上传组件

<el-uploadclass="upload-demo"dragaction="/upload" <!--要上传到的路由地址,跟flask路由函数对应-->accept=".csv" <!--只接收csv文件-->ref="upload" <!--引用标识-->:data="ruleForm" <!--额外参数的表单变量名-->:auto-upload="false":before-remove="beforeRemove":on-success="handleSuccess":limit="1"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>

JS部分

data() {return {ruleForm: {  // 和upload组件中的data参数值一致group_name: '',model_name: '',}
},methods: {onSubmit() {// 获取文件列表const fileList = this.$refs.upload.uploadFiles;// 判断是否有文件需要上传if (fileList.length > 0) {// 手动触发文件上传this.$refs.upload.submit();} else {this.$alert('请选择文件', '提示', {confirmButtonText: '确定',});}},}

flask接收部分

//这里就是upload组件的action地址
@app.route('/upload', methods=['POST', 'GET']) 
def upload():if request.method == 'POST':# 获取上传的文件file = request.files['file']result_df = pd.read_csv(file)# 额外参数s_id = request.form.get('group_name')model_name = request.form.get('model_name')# print("参数1:", s_id)# print("参数2:", model_name) return jsonify('success')

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

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

相关文章

Ubuntu 安装 JMeter:轻松上手

Apache JMeter 是一个开源的负载测试工具&#xff0c;可以用于测试静态和动态资源&#xff0c;确定服务器的性能和稳定性。在本文中&#xff0c;我们将讨论如何下载和安装 JMeter。 安装 Java&#xff08;已安装 Java 的此步骤可跳过&#xff09; 要下载 Java&#xff0c;请遵…

JSP:JDBC

JDBC&#xff08;Java Data Base Connectivity的缩写&#xff09;是Java程序操作数据库的API&#xff0c;也是Java程序与数据库相交互的一门技术。 JDBC是Java操作数据库的规范&#xff0c;由一组用Java语言编写的类和接口组成&#xff0c;它对数据库的操作提供基本方法&#…

leetCode 226.翻转二叉树

给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 226. 翻转二叉树 - 力扣&#xff08;LeetCode&#xff09; 示例 1: 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 示例 2&#xff1a; 输入&#xff1a;root…

AR眼镜双目光波导/主板硬件方案

AR(增强现实)技术的发展离不开光学元件&#xff0c;而在其中&#xff0c;光波导和Micro OLED被视为AR眼镜光学方案的黄金搭档。光学元件在AR行业中扮演着核心角色&#xff0c;其成本高昂且直接影响用户体验的亮度、清晰度和大小等因素。AR眼镜的硬件成本中&#xff0c;光机部分…

11.与JavaScript深入交流-[js一篇通]

文章目录 1.变量的使用1.1基本用法1.2理解 动态类型 2.基本数据类型2.1number 数字类型2.1.1数字进制表示2.1.2特殊的数字值 2.2string 字符串类型2.2.1基本规则2.2.2转义字符2.2.3求长度2.2.4字符串拼接 2.3boolean 布尔类型2.4undefined 未定义数据类型2.5null 空值类型 3.运…

讲述 什么是鸿蒙 为什么需要鸿蒙 为什么要学习鸿蒙

首先 我们为什么要学习鸿蒙开发&#xff1f; 因为 鸿蒙发展前景巨大 鸿蒙自发布依赖 一直受社会各界关注 强两百的 App厂商 大部分接受了与鸿蒙的合作 硬件也有非常多与鸿蒙合作的厂商 鸿蒙的合作企业基本已经覆盖整个互联网客户的主流需求 所以鸿蒙的崛起不过是早晚的问题 …

软件设计师:计算机组成与体系结构之计算机基础知识

计算机基础知识 数据的表示 码制及进制转换 原码&#xff1a;将数值转成二进制反码&#xff1a;正数与原码完全相同&#xff1b;负数&#xff0c;除了符号位其他位取反补码&#xff1a;正数与原码完全相同&#xff1b;负数&#xff0c;在补码的基础上加1移码&#xff1a;补码…

TCP/IP、Http、Socket之间的区别

目录 前言 一、TCP/IP协议 二、HTTP协议 三、Socket通信机制 四、TCP/IP、HTTP和Socket之间的区别 总结 前言 TCP/IP、HTTP和Socket是计算机网络中的三个重要概念&#xff0c;它们之间有着密切的联系和区别。 一、TCP/IP协议 TCP/IP是指传输控制协议/因特网协议&#x…

Pygame游戏实战五:拼图游戏

介绍模块 本游戏使用的是由Pycharm中的pygame模块来实现的&#xff0c;也可以在python中运行。通过Pygame制作一个拼图游戏&#xff0c;将一个完整的图片进行随机切分&#xff0c;在将其进行还原成完整的图像&#xff0c;看看这个是你小时候玩的游戏吗&#xff1f; 最小开发框…

scoi - 2013 -- 数数题解(这道题是一个非常好的数位dp题)

目录 [SCOI2013]数数 题目描述 输入描述: 输出描述: 输入 输出 说明 思路&#xff1a; 代码实现&#xff1a; [SCOI2013]数数 G-[SCOI2013]数数_牛客竞赛动态规划专题班数位dp练习 (nowcoder.com) 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&…

【开源项目】C#.NET 扩展库 -- Com.Gitusme.Net.Extensiones.Core

目录 1、项目介绍 2、集成方式 方法一&#xff1a;项目中通过Nuget包管理器安装导入 方法二&#xff1a;手动从Nuget官网下载&#xff0c;下载地址&#xff1a; 3、代码中导入命名空间 4、版本变更说明 1.0.7 版本 1.0.6 版本 1.0.5 版本 1.0.4 版本 5、演示示例 示…

45岁后,3部位“越干净”,往往身体越健康,占一个也要恭喜!

众所周知&#xff0c;人的生命有长有短&#xff0c;而我们的身体健康状态&#xff0c;也同样会受到年龄的影响&#xff0c;就身体的年龄层次而言&#xff0c;往往需要我们用身体内部的干净程度来维持&#xff0c;换句话说就是&#xff1a;若是你的身体内部越干净&#xff0c;那…

深度学习图像风格迁移 计算机竞赛

文章目录 0 前言1 VGG网络2 风格迁移3 内容损失4 风格损失5 主代码实现6 迁移模型实现7 效果展示8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习图像风格迁移 - opencv python 该项目较为新颖&#xff0c;适合作为竞赛课题…

【问题思考总结】多维随机变量函数的分布的两种情况的计算方法【离连/连连】

问题 今天做李六第一套的时候发现&#xff0c;有的时候&#xff0c;面对这种第二问的题&#xff0c;很自然地就想到了Fz&#xff08;z&#xff09;&#xff0c;然后进行化简&#xff0c;但是有的时候&#xff0c;像这道题&#xff0c;就突然发现P{XY<z}是一个非常复杂的形式…

Vue中的深度监听Deep Watch

在Vue中&#xff0c;深度监听&#xff08;deep watching&#xff09;是指对对象或数组进行递归观察其变化的过程。这可以通过watch选项来实现。 当你想要监听一个对象或数组的每个属性或元素的变化时&#xff0c;Vue提供了deep选项。通过将deep设置为true&#xff0c;Vue会递归…

【从浅识到熟知Linux】基本指定之cat、more和less

&#x1f388;归属专栏&#xff1a;从浅学到熟知Linux &#x1f697;个人主页&#xff1a;Jammingpro &#x1f41f;每日一句&#xff1a;写完这篇我要去吃晚饭啦&#xff01;&#xff01; 文章前言&#xff1a;本文介绍cat、more和less指令三种查看文件的用法并给出示例和截图…

Linux CentOS7 LVM

LVM&#xff08;Logical Volume Manger&#xff09;逻辑卷管理&#xff0c;Linux磁盘分区管理的一种机制&#xff0c;建立在硬盘和分区上的一个逻辑层&#xff0c;提高磁盘分区管理的灵活性。物理设备&#xff0c;是用于保留逻辑卷中所存储数据的存储设备。它们是块设备,可以是…

mac 修改 hosts 文件

打开 hosts 所在文件夹 command shift G 快捷键 输入&#xff1a;“/private/etc/hosts” 后回车 如下所示 进入 hosts 文件所在位置&#xff0c;找到 hosts 文件&#xff0c;双击打开 修改 hosts 文件 将所需要的配置信息追加到hosts 文件中&#xff0c;或者修改需要改…

Java串行化接口详解

引言 在 Java 开发中&#xff0c;我们经常需要将对象进行序列化和反序列化&#xff0c;以便在网络传输或存储到持久化介质中。Java 提供了一种机制&#xff0c;即通过实现 Serializable 接口来实现对象的串行化。本文将详细介绍 Java 串行化接口的用法和原理&#xff0c;以及一…

【md5】编码 、【timestamp】当前时间戳

对文本进行md5编码 使用md5对文本进行编码&#xff0c;可以使文本拥有唯一标识&#xff0c; from hashlib import md5 ii love y idmd5(str(i).encode(utf-8)).hexdigest() print("md5编码:",id)获取当前的可读性时间戳 import datetime current_time datetime.…