本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
上传文件接口附带额外参数进行操作上传
正常项目的需求是文件单独上传，在提交表单数据，请求两次接口，现需求有变，需要一个接口搞定，也就是提交表单和上传文件同步进行，elementui中的upload组件上传文件时能附带额外的参数，所以我的思路是把表单数据作为上传时附带的额外参数提交给后台就好了。下面废话不多说，直接上代码了：
表单部分
额外参数注意:data这里
<el-form :inline="false" ref="form2" :rules="rules2" :model="form2" label-width="100px" style="padding: 30px 0;">
<el-form-item label="导入方式" prop="importType">
<el-select v-model="form2.importType" placeholder="请选择导入方式">
<el-option
v-for="item in importTypeData"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="选取文件" prop="fileList">
<el-upload
class="upload-demo"
drag
ref="newupload"
:action="action"
accept=".xls,.xlsx"
:on-change="onChange" :on-success="onSuccess" :file-list="form2.fileList"
:auto-upload="false"
:data="form2"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</el-form-item>
<el-form-item label="">
<el-button type="primary" @click="importFilepost">导入</el-button>
<el-button type="primary" @click="onCancel">取消</el-button>
</el-form-item>
</el-form>
data数据：
export default {
data() {
return {
form2:{
importType:"increment",
fileList: [],
},
rules2: {
fileList: [
{ required: true, message: '请选择文件', trigger: 'change' }
],
},
action: "/investPlanCheck/importSHCQProject",
}
},
}
在methods里增加的方法
手动上传文件列表submit方法，需要触发submit
//onChange这里我根据我的业务需求进行修改替换上一次的上传文件了
onChange(file, fileList) {//文件状态改变时的钩子函数
// this.form2.fileList = fileList;
if (fileList.length > 0) {
this.form2.fileList = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的文件
}
},
onSuccess(response, file, fileList) {//文件上传成功时的钩子
if(response.state==1){
this.$message.success('导入成功');
this.dialogVisible2=false;
}else{
this.$message.error('导入失败');
}
this.form2.fileList = [];
this.$refs['form2'].resetFields();
this.$refs['newupload'].clearFiles();
},
importFilepost(){//导入提交---
this.$refs.form2.validate((valid) => {
if (valid) {
//触发组件的action
this.$refs.newupload.submit();//主要是这里
} else {
console.log('error submit!!');
return false;
}
})
},
onCancel(){//取消
this.$refs.form2.resetFields();
},
效果图：
评论抽奖
欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边
抽奖礼物：100份，掘金官方提供，包括掘金徽章、拖鞋、马克杯、帆布袋等，随机发放
抽奖时间：「掘力星计划」活动结束后，预计3个工作日内，官方将在所有符合规则的活动文章评论区抽出
抽奖方式：掘金官方随机抽奖+人工核实
评论内容：与文章内容相关的评论、建议、讨论等，「踩踩」「学习了」等泛泛类的评论无法获奖
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
