Vue项目中element-ui 上传文件upload与form一起提交

需求：提交表单数据和上传文件同步进行，请求一次接口。
elementui中的upload组件上传文件时能附带额外的参数，所以可以把表单数据作为上传时附带的额外参数提交给后台。

<el-dialog
      class="add_box"
      :title="title"
      :visible.sync="editFormVisible"
      width="25%"
      style="min-width:1100px;"
      @click="closeDialog"
    >
	<el-form
        label-width="80px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="教材名称" prop="lname">
          <el-input
            size="mini"
            v-model="editForm.lname"
            auto-complete="on"
            placeholder="请输入教材名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传" prop="files">
          <el-upload
            ref="uploads"
            :auto-upload="false" //关闭自动上传
            class="upload-demo"
            action="http://101.205.19.108:8294/MCService/action/addmaterial" //上传文件的地址
            :data="editForm"   //表单数据作为上传时附带的额外参数
            :on-success="upFile" //成功会执行此函数
            multiple
            :limit="2"
            name="files"
            :on-exceed="handleExceed"
            :file-list="fileList"
            accept=".doc,.docx,.xslx,pdf,.ppt" //限制上传文件的类型
          >
            <el-button size="mini" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('editForm')"
          >保存</el-button
        >
      </div>
  </el-dialog>

js代码

<script>
import {
    
    
  addmaterial,
  updatematerial,
  getmaterials_by_cid_mid,
  get_materials_page,
  getall_citys,
  getall_mtypes,
} from "../../api/api";
export default {
    
    
  components: {
    
    },
  data() {
    
    
    return {
    
    
      editForm: {
    
    
        cid: "",
        mid: "",
        lname: "",
        memo: "",
      },
      //上传文件
      fileList: [],
    };
  },

  methods: {
    
    
    // 编辑、增加页面保存方法
    submitForm(editData) {
    
    
      this.$refs[editData].validate(async (valid) => {
    
    
        if (valid) {
    
    
          console.log(this.editForm);
            this.$msgbox
              .confirm("确定保存?", "提示信息", {
    
    
                cancelButtonText: "取消",
                confirmButtonText: "确定",
                type: "warning",
              })
              .then(() => {
    
    
              //进行文件上传
                this.$refs.uploads.submit();
          }
        } else {
    
    
          return false;
        }
      });
    },
    /* 上传文件操作 */
    upFile(res, file) {
    
    
      console.log(res);
      if (res.status == 200) {
    
    
        // 文件上传成功后的回调，比如一些提示信息或者页面跳转都写在这里
        this.$message.success(res.info);
      } else {
    
    
        this.$message.error(res.info);
        let _this = this;
        setTimeout(function() {
    
    
          _this.$refs.uploads.clearFiles();
        }, 1000);
      }
    },

  },
};
</script>

这样就可以添加文件的同时也提交表单了。