el-upload 实现文件导入

 

<el-upload
        style="display: inline-block;"
        class="upload-demo"
        action=""
        :on-change="handleChange"
        :on-exceed="handleExceed"
        :on-remove="handleRemove"
        :limit="limitUpload"
        :http-request="uploadExcel"
        :show-file-list="false"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        :auto-upload="true"
      >
        <el-button type="primary" size="small">批量导入</el-button>
        <!-- <span slot="tip" class="el-upload__tip">
          只 能 上 传 xlsx / xls 文 件
        </span> -->
      </el-upload>

 

// 导入
    handleChange(file, fileList) {
      this.fileTemp = file.raw;
      console.log(fileList);
    },

    handleRemove(file, fileList) {
      this.fileTemp = null;
      console.log(fileList);
    },
    // 上传文件个数超过定义的数量
    handleExceed() {
      this.$message.warning("当前限制选择 1 个文件，请删除后继续上传");
    },
    async uploadExcel(item) {
      console.log(item);
      let formdata = new FormData();
      formdata.append("file", this.fileTemp);
      formdata.append("modelId", this.$route.params.id);
      formdata.append("type", 2);
      let res = await importData(formdata);
      console.log(res);
      if (res === null) {
        this.$message.success("上传成功！");
      } else {
        this.$message.error("");
      }
    },