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

需求

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

方法

上传组件

html 复制代码
<el-upload
	class="upload-demo"
	drag
	action="/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部分

javascript 复制代码
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接收部分

python 复制代码
//这里就是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')
相关推荐
java1234_小锋1 小时前
TensorFlow2 Python深度学习 - TensorFlow2框架入门 - 使用Keras实现逻辑回归
python·深度学习·tensorflow·tensorflow2
java1234_小锋1 小时前
TensorFlow2 Python深度学习 - TensorFlow2框架入门 - Sequential顺序模型
python·深度学习·tensorflow·tensorflow2
雨夜的星光6 小时前
Python JSON处理:load/loads/dump/dumps全解析
开发语言·python·json
fen_fen7 小时前
Java打包时,不将本地Jar打包到项目的最终 JAR 中
开发语言·python·pycharm
可触的未来,发芽的智生8 小时前
触摸未来2025.10.10:记忆的种子,当神经网络拥有了临时工作区,小名喜忆记系统
人工智能·python·神经网络·机器学习·架构
mortimer9 小时前
在 Windows 上部署 NVIDIA Parakeet-TDT 遇到的坑
python·github·nvidia
Rock_yzh9 小时前
AI学习日记——卷积神经网络(CNN):完整实现与可视化分析
人工智能·python·深度学习·神经网络·学习·cnn
生信小白菜儿9 小时前
深度学习(DL)概念及实例操作
人工智能·python·深度学习
测试老哥10 小时前
如何编写好测试用例?
自动化测试·软件测试·python·功能测试·测试工具·职场和发展·测试用例
郝学胜-神的一滴11 小时前
Effective Python 第44条:用纯属性与修饰器取代旧式的 setter 与 getter 方法
开发语言·python·程序人生·软件工程