一、项目场景

批量数据上传后台，需要从后台下载一个固定格式的 Excel表格，然后在表格里面添加数据，将数据格式化，再上传给后台，后台做解析处理，往数据库添加数据

二、实现功能展示

点击导入excel按钮，跳转到上传excel功能页面，点击上传或者是通过拖拽都能实现excel表格上传

三、实现思路

通过Element UI的<el-dialog>实现弹出层

1、excel按钮

:isShow=isShow是否显示上传文件层
:onSuccess="success"上传成功之后的回调

2、excel上传页面

accept=".xlsx, .xls"：限定文件类型
beforeUpload(){}在上传之前做一些自己的特殊判断，如判断文件的大小是否大于 1 兆？若大于 1 兆则停止解析并提示错误信息。

四、实现代码

1、下载xlsx

excel导入功能需要使用npm包xlsx，所以需要安装**xlsx**插件

npm i xlsx

2、页面代码

excel按钮页面

<template>
  <div>
    <el-button
      type="primary"
      @click="goExcel"
      style="margin: 50px 50px 50px 50px"
      >导入excel表格</el-button
    >
    <UploadExcel :onSuccess="success" :isShow="isShow"></UploadExcel>
  </div>
</template>
<script>
import UploadExcel from "./components/UploadExcel.vue";
export default {
  name: "App",
  components: { UploadExcel },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    goExcel() {
      this.isShow = true;
    },
    async success(data) {
      // 数据库的key为英文，我们上传的key为中文，需要一一转化
      const userRelations = {
        入职日期: "timeOfEntry",
        手机号: "mobile",
        姓名: "username",
        转正日期: "correctionTime",
        工号: "workNumber",
      };
      // 将key值一一对应
      const newArr = data.results.map((item) => {
        var userInfo = {};
        Object.keys(item).forEach((key) => {
          userInfo[userRelations[key]] = item[key];
        });
        return userInfo;
      });
      console.log(newArr);
      //   await importEmployee(newArr); // 调用上传接口
      this.$message("上传文件成功");
      this.isShow = false;
    },
  },
};
</script>

UploadExcel页面

<template>
  <el-dialog title="导入excel表格" :visible="isShow" @close="closeShow">
    <div class="upload-excel">
      <div class="btn-upload">
        <el-button
          :loading="loading"
          size="mini"
          type="primary"
          @click="handleUpload"
        >
          点击上传
        </el-button>
      </div>

      <input
        ref="excel-upload-input"
        class="excel-upload-input"
        type="file"
        accept=".xlsx, .xls"
        @change="handleClick"
      />
      <div
        class="drop"
        @drop="handleDrop"
        @dragover="handleDragover"
        @dragenter="handleDragover"
      >
        <i class="el-icon-upload" />
        <span>将文件拖到此处</span>
      </div>
    </div>
  </el-dialog>
</template>


<script>
import * as XLSX from "xlsx";
export default {
  props: {
    isShow: Boolean,
    onSuccess: Function, // eslint-disable-line
  },
  data() {
    return {
      loading: false,
      excelData: {
        header: [],
        results: [],
      },
    };
  },
  methods: {
    closeShow() {
      this.$parent.isShow = false;
    },
    // 点击导入
    handleDrop(e) {
      e.stopPropagation();
      e.preventDefault();
      if (this.loading) return;
      const files = e.dataTransfer.files;
      if (files.length !== 1) {
        this.$message.error("仅支持单个上传一个文件");
        return;
      }
      const rawFile = files[0]; // 获取文件信息
      if (!this.isExcel(rawFile)) {
        //是不是excel文件
        this.$message.error(
          "Only supports upload .xlsx, .xls, .csv suffix files"
        );
        return false;
      }
      this.upload(rawFile);
      e.stopPropagation();
      e.preventDefault();
    },
    handleDragover(e) {
      e.stopPropagation();
      e.preventDefault();
      e.dataTransfer.dropEffect = "copy";
    },
    handleUpload() {
      this.$refs["excel-upload-input"].click(); //触发表单上传事件，跳出选择文件框
    },
    handleClick(e) {
      const files = e.target.files;
      const rawFile = files[0]; // only use files[0]
      if (!rawFile) return;
      this.upload(rawFile);
    },
    upload(rawFile) {
      this.$refs["excel-upload-input"].value = null; // fix can't select the same excel
      if (!this.beforeUpload) {
        this.readerData(rawFile);
        return;
      }
      const before = this.beforeUpload(rawFile); //判断文件上传大小
      if (before) {
        this.readerData(rawFile); //把excel转化成数组
      }
    },
    // 限定文件大小
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (isLt1M) {
        return true;
      }
      this.$message({
        message: "请不要上传大于1M的文件",
        type: "warning",
      });
      return false;
    },

    readerData(rawFile) {
      this.loading = true;
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsArrayBuffer(rawFile);
        //参数可以是 Blob 或者 File 对象异步结果将在onload 事件中体现
        reader.onload = (e) => {
          const data = e.target.result;
          const workbook = XLSX.read(data, { type: "array" });
          const firstSheetName = workbook.SheetNames[0]; // "SheetJS" 取出工作表名称
          const worksheet = workbook.Sheets[firstSheetName]; //取出工作表名称对应的表格数据
          const header = this.getHeaderRow(worksheet); //表头名
          const results = XLSX.utils.sheet_to_json(worksheet); //输出数据，除去表头
          this.excelData.results = results;
          this.excelData.header = header;
          this.onSuccess && this.onSuccess(this.excelData);
          this.loading = false;
          resolve();
        };
      });
    },
    getHeaderRow(sheet) {
      const headers = [];
      const range = XLSX.utils.decode_range(sheet["!ref"]); //!ref: "A1:E21"
      let C;
      const R = range.s.r;
      /* start in the first row */
      for (C = range.s.c; C <= range.e.c; ++C) {
        /* walk every column in the range */
        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
        /* find the cell in the first row */
        let hdr = "UNKNOWN " + C; // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell); //每个头部名
        headers.push(hdr);
      }
      return headers;
    },
    isExcel(file) {
      return /\.(xlsx|xls|csv)$/.test(file.name);
    },
  },
};
</script>
<style scoped lang="scss">
.upload-excel {
  display: flex;
  justify-content: center;
  // margin-top: 100px;
  .excel-upload-input {
    display: none;
    z-index: -9999;
  }
  .btn-upload,
  .drop {
    border: 1px dashed #bbb;
    width: 350px;
    height: 160px;
    text-align: center;
    line-height: 160px;
  }
  .drop {
    line-height: 80px;
    color: #bbb;
    i {
      font-size: 60px;
      display: block;
    }
  }
}
</style>

五、实现效果