Vue2+ElementUI实现上传Excel文件

目前在做的一个项目有个需求：上传Excel文件，实现数据的导入。和大家分享一下，第一次写，格式可能有些乱。

实现效果如下图所示：

1、实现效果图

2、Template内的代码

<template>
  <div>
    <div class="uploadDiv">
      <!-- 下载模板按钮 -->
      <el-button type="primary" @click="downloadTemplate">下载模板文件</el-button>
      <!-- 文件上传按钮 -->
      <el-button type="primary" @click="dialogVisible = true">导入党员信息</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="上传党员信息">
      <el-upload
        class="upload-demo"
        :show-file-list="false"
        :on-success="uploadSuccess"
        :before-upload="beforeExcelUpload"
        drag
        style="text-align: center"
        :action="uploadUrl"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传Excel表格文件</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

3、script代码

<script>

export default {
  name: "",
  data() {
    return {
      uploadUrl: "你自己的上传Excel地址",
      dialogVisible: false,
    };
  },
  methods: {
    // 显示所有数据
    // 根据自己的代码从后端获取数据
    showAll() {
      ...
    },
    // 文件上传成功的处理函数
    uploadSuccess(response, file, fileList) {
      this.dialogVisible = false; // 关闭弹出框
      if (response.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.showAll(); // 上传成功之后重新查询列表
      } else {
        this.$message({
          message: "上传失败，系统异常",
          type: "error",
        });
      }
    },
    // 上传前对文件的格式和大小的判断
    beforeExcelUpload(file) {
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!extension && !extension2) {
        this.$message({
          message: "上传模板只能是 xls、xlsx格式!",
          type: "error",
        });
        return false; // return false就不会走上传接口
      }
      if (!isLt2M) {
        this.$message({
          message: "上传模板大小不能超过 10MB!",
          type: "error",
        });
        return false;
      }
      return extension || extension2; // 必须要有返回值
    },
    // 下载模板文件
    downloadTemplate() {
      // 获取项目部署的基础路径
      const baseUrl = window.location.origin;
      // 构建文件的完整 URL
      // 模板文件我是存放在了项目public/template文件夹中
      let downloadUrl = `${baseUrl}/template/信息表.xlsx`;
      var a = document.createElement("a");
      a.href = downloadUrl;
      a.download = "信息表.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
  },
};
</script>

以上便是Vue2+ElementUI实现上传Excel文件导入数据的功能。