需求
網(wǎng)頁(yè)需要實(shí)現(xiàn)上傳一個(gè)csv文件，并攜帶兩個(gè)表單的參數(shù)給后端文章來源地址http://www.zghlxwxcb.cn/news/detail-771267.html
方法
上傳組件
<el-upload
class="upload-demo"
drag
action="/upload" <!--要上傳到的路由地址，跟flask路由函數(shù)對(duì)應(yīng)-->
accept=".csv" <!--只接收csv文件-->
ref="upload" <!--引用標(biāo)識(shí)-->
:data="ruleForm" <!--額外參數(shù)的表單變量名-->
:auto-upload="false"
:before-remove="beforeRemove"
:on-success="handleSuccess"
:limit="1">
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div>
</el-upload>
JS部分
data() {
return {
ruleForm: { // 和upload組件中的data參數(shù)值一致
group_name: '',
model_name: '',
}
},
methods: {
onSubmit() {
// 獲取文件列表
const fileList = this.$refs.upload.uploadFiles;
// 判斷是否有文件需要上傳
if (fileList.length > 0) {
// 手動(dòng)觸發(fā)文件上傳
this.$refs.upload.submit();
} else {
this.$alert('請(qǐng)選擇文件', '提示', {
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)
# 額外參數(shù)
s_id = request.form.get('group_name')
model_name = request.form.get('model_name')
# print("參數(shù)1：", s_id)
# print("參數(shù)2：", model_name)
return jsonify('success')
文章來源：http://www.zghlxwxcb.cn/news/detail-771267.html
到了這里，關(guān)于用element ui上傳帶參數(shù)的文件，并用flask接收的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
