【使用elementUI的el-upload实现上传文件的功能，上传文件不直接调接口，而是使用按钮提交】【文件上传接口的调用需要使用FormData()构造函数】

项目场景：

项目场景：点击按钮选择文件，然后再点击按钮上传文件（点击按钮的时候调用接口）。
解决方法：action属性是必传值，选择完文件之后自动上传。这里需要把acion属性填成 #
即：action=“#”

---

问题描述

使用element UI的 el-update 组件上传.xlsx文件。但是el-update默认是在选择文件的时候直接调用接口，我这边实际需求是，点击另外的按钮来向后台提交文件，调用接口。

组件源代码：

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload">i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传em>div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kbdiv>
el-upload>

---

原因分析：

action属性是必传值，选择完文件之后自动上传。

---

解决方案：

action属性是必传值，选择完文件之后自动上传。这里需要把acion属性填成 #
即：action=“#”
auto-upload属性，是否在选取文件后立即进行上传，默认为true，改为false。
即：:auto-upload=“false”
accept属性，指定文件类型。
on-change：因为不用action去上传文件，所以只能使用on-change来监听文件是否选择完成。on-success，on-error，on-progress，before-upload这些方法不能使用。
on-remove： 来监听删除文件事件。

修改之后的代码：

<el-upload
  ref="uploadDiv"
  class="upload-demo"
  drag
  action="#"
  accept=".xlsx"
  :auto-upload="false"
  :on-remove="handleRemove"
  :on-change="changeFile"
  >
  <i class="el-icon-upload">i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传em>div>
  <div class="el-upload__tip" slot="tip">仅限拓展名为.xlsx的表格div>
el-upload>

<el-button type="primary" @click="submit()">提交el-button>

js代码：提交file文件需要使用FormData()构造函数。
let formData = new FormData(); // 这是很重要的一步
formData.append(‘file’, this.file);

changeFile(val) {
      // console.log("选择文件成功");
      let nameArray = val.name.split(".");
      if(nameArray[nameArray.length - 1] === "xlsx") {
      // file保存选择的文件
        this.file = val.raw;
      } else {
        this.$message({
          message: '表格格式错误,请确认表格内容并重新上传',
          type: 'warning',
          duration: 2000
        });
      }
    },
submit() {
 // console.log("提交");
   let formData = new FormData();
   formData.append('file', this.file);
   // 添加其他非文件的参数，可以使用set() 方法
   // formData.set('config_type', this.json.config_typ);
   this.loading = true;
   // sysUpdateBasicConfig 这个是我封装的接口名，
   // 接口里面需要指定请求头 headers['Content-Type'] = 'multipart/form-data'
   sysUpdateBasicConfig(formData).then(res => {
   	
   })
 },