vue中联调后端导入excel接口,并且获取导入后的excel表格数据

需求:联调excel导入接口,并且获取excel导入的数据
实现:封装el-upload组件,实现复用

在components中新建UploadDialog文件,封装uploadDialog组件
uploadDialog.vue文件内容(直接cv就可以使用)

<template>
  <el-dialog
    title="上传文件"
    :visible.sync="dialogShow"
    custom-class="customWidth"
    :close-on-click-modal="false"
    :show-close="false"
  >
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="action_"
      :headers="headers"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :before-upload="checkFileSize"
      accept=".xls, .xlsx"
      :limit="3"
      :on-exceed="handleExceed"
      :on-success="uploadSuccess"
      :on-error="uploadErr"
      :file-list="fileList"
    >
      <el-button
        slot="trigger"
        class="filter-item"
        size="small"
        type="primary"
        icon="el-icon-upload"
        >选择文件</el-button
      >
      <div slot="tip" class="el-upload__tip" style="font-size: 14px">
        只能上传提供的
        <span style="color: red">模板EXCEL文件</span>
        ，且不超过2M
      </div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getToken } from "../../utils/cookie";
export default {
  name: "UploadDialog",
  props: {
    url: {
      type: String,
      default: "",
    },
    dialogShow: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    action_: function () {
      return process.env.VUE_APP_BASE_API + this.url;
      // return "http://127.0.0.1:9091"+this.url
    },
  },
  data() {
    return {
      dom: null,
      fileList: [],
      headers: { Authorization: getToken() },
      // action_:window.location.protocol+'//'+window.location.host+'/appService'+this.url
    };
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return false;
    },
    checkFileSize(file) {
      let fileSize = Number(file.size / 1024 / 1024);
      if (fileSize > 2) {
        this.$message.warning("文件大小不能超过2M");
        return false;
      }
    },
    uploadSuccess(response, file, fileList) {
      if (response && response.code == 200) {
        this.$message({
          type: "success",
          message: "上传成功!",
        });
        //console.log("excel数据", response.data);
        this.$emit("toFather", response.data);
        this.$refs.upload.clearFiles();
        this.closeDialog();
      } else {
        this.$message({
          type: "error",
          message: "文件导入时数据错误," + response.message,
        });
        //console.log("response", this.fileList);
        fileList.pop();
      }
    },
    uploadErr(err, file, fileList) {
      this.$message({
        type: "error",
        message: "文件导入失败",
      });
    },
    closeDialog() {
      this.$emit("closeListener", false);
    },
  },
};
</script>
<style lang="less">
.el-icon-close-tip {
  display: none !important;
}
.el-icon-close {
  display: none !important;
}
</style>

在需要用到的父组件页面中进行引入

    <upload-dialog
      :url="url"
      :dialogShow="dialogShow"
      @closeListener="getFromChild"
      @toFather="getExcelTabel"
    ></upload-dialog>
  </el-container>

dialogShow:控制上传excel文件对话框的显示与隐藏
url:后端的接口地址
getFromChild:关闭excel上传对话框
getExcelTabel:获取excel上传的数据

父组件中的方法

    getFromChild(false) {
      this.dialogShow = false;
    }
  //获取excel数据
    getExcelTabel(data) {
      this.excelData = data;
      console.log("excel", this.excelData);
      this.innerTableData.push(...this.excelData);
    },    

至此上传excel文件并且获取上传文件后的内容功能就实现了