vue2+element+导入Excel表格并携带参数

(一)、一个按钮实现导入功能

（1）页面实现

action="写后端导入接口地址"

:on-change="方法名称"

:file-list="导入的文件列表"

<el-form-item class="selectFile">
        <el-upload
          class="upload-demo"
          action="/api/People/importPeopleExcel"
          :on-change="handleChange"
          :file-list="fileList"
        >
          <el-button size="small" type="success">导入模板</el-button>
        </el-upload>
</el-form-item>

（2）data中定义数组

fileList: [],

（3）方法

 handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },

(二)、两个按钮实现导入功能

（1）页面实现

 <el-form-item class="buttonItem"
        ><el-upload
          action="https://jsonplaceholder.typicode.com/posts/"  //官方定义写法
          multiple
          :file-list="fileList"  //文章列表
          :http-request="modeUpload"  //覆盖默认的上传方法
        >
          <el-button size="small" type="warning" 
            >点击选择文件<i class="el-icon-download el-icon--right"></i
          ></el-button>
        </el-upload>
        <el-button @click="upload" type="primary" size="small"
          >点击上传文件</el-button
        ></el-form-item
      > 

（2）data中定义数组

fileList: [],

（3）方法

// 导入GoToFile
    modeUpload: function (item) {
      this.mode = item.file;
    },
    upload: function () {
      let fd = new FormData();
      fd.append("file", this.mode);
      axios
        .post("/api/Check/importExcel", fd, {   //请求地址
          headers: {
            "Content-Type": "multipart/form-data", //请求头
          },
        })
        .then((response) => {
          console.log(response.data);
        });
    },

(三)、传递弹窗内数据和文件给后台实现导入

 

（1）页面实现

<el-form-item label="流程文件" prop="flowFile" width="50px">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :on-change="handleChange"
            :auto-upload="false"
            :file-list="fileList"
          >
            <el-button size="small" type="success">选择文件</el-button>
          </el-upload>
        </el-form-item>

（2）data中定义数组

fileList: [],
FlowDeploy: {
    flowCategory: "",
    flowFile: "",
    flowName: "",
   },
files: "",

（3）方法

//通过onchanne触发方法获得文件列表
    handleChange(file, fileList) {
      this.fileList = fileList;
      this.files = fileList[0].raw;
      console.log(11111, fileList[0].raw);
    },
    upload: function () {
      let formData = new FormData();
      formData.append("file", this.files);  //追加文件到请求接口
      formData.append("flowName", this.FlowDeploy.flowName);  //追加文件名称到请求接口
      formData.append("flowCategory", this.FlowDeploy.flowCategory); //追加文件类型到请求接口
      axios
        .post("/api/Flow/deploy", formData, {   //请求接口
          //   headers: {
          //     "Content-Type": "multipart/form-data",
          //   },
        })
        .then((res) => {
          console.log(res);
        });
    },