需求
网页需要实现上传一个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')