elementUI上传文件el-upload

在使用elementUI进行文件提交的时候，有时候需要提交一些别的参数，这时候需要接收到上传的文件之后，将文件转为formData表单数据(具体看后端)再进行提交。
首先我们需要再模板中先配置下 el-upload,将 auto-upload 设置为 false 禁止自动提交，相关的属性可以查看elementUI文档：

<el-upload
   name="file"
   ref="upload"
   :show-file-list="false"
   :action="baseUrl + '/pc/fee/bill/take-excel'"
   :on-change="addFile"
   :file-list="fileList"
   :limit="1"
   :auto-upload="false">
  <el-button
  type="primary" 
  size="small">选择文件</el-button>
</el-upload>

然后就是在用户将文件选择好上传的时候，我们需要转成 FormData 的格式可以先使用

addFile(file,fileList) { //上传文件
    //判断文件格式
    let AllInameExt = ".xlsx|"
    let extName = file.name.substring(file.name.lastIndexOf(".")).toLowerCase()
    if (AllInameExt.indexOf(extName + "|") == -1){
      this.$message.error('文件格式不正确')
      // AllInameExt.indexOf(extName + "|") != -1
      this.fileList = []
      return 
    } 
  //如果有多个文件只取最后一个
  this.fileData = new FormData()
  this.fileData.append("file", fileList[0].raw);        //添加文件
}

new FormData() 创建出来，然后通过提供的

 formdata.append('name', value) 

方法向formdata里面添加键值对。需要注意的是，这个时候如果想要查看是否添加成功千万不要用 console.log() 直接打印的方式，这样你会发现输出的是空的，正确的方式是通过给定的 get/getAll keys等方式获取到数据：

console.log(formdata)    //会输出一个空的 FormData
console.log(formdata.get('name'))  //会输出对应的value

这样就能输出你的 formdata 数据啦。
准备工作完成之后，和后端小伙伴沟通下，我们来配置下请求的接口：

billChargePostApiQuery(url,data){   
    return request({
      url: url,
      headers: {
        "Content-Type": "multipart/form-data"        //注意格式
      },
      method: 'post',
      data,
      baseURL: process.env.NODE_ENV === 'production' ? '正式' : '测试'
    })
  },

然后将接口所需要的一些参数也加进 formdata 中：

let data ={
  schoolId: this.$store.state.user.school_id,
  schoolName: this.$store.state.user.school_name,
  classificationId: this.form.order_sort,
  classificationName: sort_name,
  type: this.checkList.join(','),
  feeType: this.form.month? '2': '1',
  schoolYear: schoolYearGet,
  semester: this.form.semester,
  payMonth: this.form.month,
  createUserId: this.$store.state.user.userinfo.memberId,
  createUserName: this.$store.state.user.userinfo.name
}
//应要求转为 json 字符串添加进去
this.fileData.append("takeExcelQuery", JSON.stringify(data))

this.$API.billChargePostApi('pc/fee/bill/take-excel',this.fileData)
.then(res => {
  console.log('提交成功',res);
}).catch(err => {
  console.log('提交失败', err);
})

剩下的就是后端小伙伴的工作啦。
欢迎指正！