用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')