vue+elementUI实现表单数据和上传文件同一个接口同时上传

        之前做项目有个需求，需要将收集的表单数据和文件点击提交后同时传给后台，且只有一个接口，而elementUI的Upload组件默认是选择完文件之后自动上传，就需要配置自定义上传

        这里使用的是elementui组件库中的Upload上传组件

1.部分代码

<el-upload
        class="upload-demo"
        action="#"                  //自定义上传需要将action为空或者"#"
        :limit="1"                  //限定上传文件数量
        :on-exceed="handleExceed"   //文件数量超过限定触发
        :auto-upload="false"        //选取完文件后立即进行上传,这里要关闭
        :multiple="false"           //是否支持多选文件
        ref="uploadExcel"           
        :http-request="uploadFile"  //自定义上传
>
<el-button type="primary">导入文件</el-button>
 </el-upload>

2.js部分:

  //自定义上传方法，使用上传组件的submit()后才会触发以获取文件实体
uploadFile(param) {
      this.file = param.file;
    },

//上传文件+表单数据
submitEditForm() {
      this.$refs.uploadExcel.submit();
      //携带文件必须使用此对象
      const formDatas = new FormData(); 
      if (this.file) {
        //append方法逐个添加键值对
        formDatas.append("file", this.file); //把文件实体添加到表单对象
      }
       //添加收集的表单数据
      this.addForm = this.form
       //序列化其他数据为json添加到表单对象，后台反序列化获取对象实体，也可以单个append(),后台直接用对象取，如果一次性添加而不序列化会出错
      formDatas.append("form", JSON.stringify(this.addForm));
       //将数据随请求发过去
      this.addTrans(formDatas);
  },


//限制上传文件数量
    handleExceed() {
      this.$alert("文件数量超过限制", {
        confirmButtonText: "确定",
      });
    },

          

        实例化一个formData对象,使用append()方法将数据添加到对象中

        formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value

key	value
file	name
form	[name1,name2,name3]

        注意：

        使用append()方法，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾

        无法直接打印实例化出来的对象 formDatas,要使用get()或getAll()

formData.get("form"); // 获取key为form的第一个值
formData.getAll("file"); // 返回一个数组，获取key为file的所有值

3.接口部分:

        需要添加:'Content-Type': 'multipart/form-data'

 addTrans(data) {
    return request({
      contentType: false,
      headers: { 'Content-Type': 'multipart/form-data'},
      method: 'post',
      url: '/',
      data: data,
    })   
  },