element ui 带上传文件的form表单

简介： element ui 带上传文件的form表单

效果展示

原理说明

上传文件接口附带额外参数进行操作上传
正常项目的需求是文件单独上传，在提交表单数据，请求两次接口，现需求有变，需要一个接口搞定，

也就是提交表单和上传文件同步进行，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();
},

后端参数接收

另一篇: https://blog.csdn.net/m0_61476911/article/details/127605245