Spring boot + Vue&element ui +eazyPoi导入

前端下载模板代码:

downLoadTemplate() {
      axios.get('file/userImport.xlsx', {
        responseType: 'blob'
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        const fname = '用户导入模板.xlsx'
        link.href = url
        link.setAttribute('download', fname)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },

后端业务层导入代码:

@Override
    public boolean addUserList(List<User> userList) {
        Sm4Utils sm = new Sm4Utils();
        List<Map<String, Object>> verificationList = userMapper.userNameVerificationList(userList);
        Map<String, String> verificationMap = verificationList.stream()
                .collect(Collectors.toMap(s -> s.get("username").toString(), s -> s.get("num").toString()));
        for (User u : userList) {
            //如果值都不为空
            if (StrUtil.isNotEmpty(u.getUsername()) && StrUtil.isNotEmpty(u.getRealName())
                    && StrUtil.isNotEmpty(u.getIdCard()) && StrUtil.isNotEmpty(u.getPassword())) {
                String num = verificationMap.get(u.getUsername());
                if (StrUtil.isNotEmpty(num) && Integer.parseInt(num) > 0) {
                    throw error("登录名:" + u.getUsername() + "已存在");
                }
                String card = Sm4Utils.encryptEcb(sm.getHexKey(), u.getIdCard());
                String passWord = Md5Util.getMD5(u.getPassword());
                u.setIdCard(card);
                u.setPassword(passWord);
            } else {
                throw error("表格中有值为空,请填写完整!");
            }
        }
        return saveBatch(userList);
    }

controller直接调用接口即可.

前端页面代码:

<template>
  <div class="app-container">
    <z-card style="height: auto">
      <el-form ref="searchForm" class="searchForm" :model="searchForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6" class="form-item-height">
            <el-form-item label="用户姓名">
              <el-input v-model.trim="searchForm.realName" clearable size="mini" placeholder="请输入用户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="6" class="form-item-height">
            <el-form-item label="登录名称">
              <el-input v-model.trim="searchForm.username" clearable size="mini" placeholder="请输入登录名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号">
              <el-input v-model.trim="searchForm.idCard" clearable size="mini" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="form-item-btnGroup">
              <el-button class="filter-item" type="primary" icon="el-icon-search" size="mini" @click="search">
                搜索
              </el-button>
              <el-button
                size="mini"
                class="filter-item"
                style="margin-left: 10px;"
                icon="el-icon-refresh"
                @click="refresh"
              >
                重置
              </el-button>
            </div>
            <el-dialog
              title="导入数据"
              :visible.sync="dialogVisible"
              :destroy-on-close="true"
              width="60%"
              :before-close="dialogClose"
              center
            >
              <el-table
                :data="accountList"
                border
                style="width: 100%;"
              >
                <el-table-column
                  prop="realName"
                  header-align="center"
                  align="center"
                  label="用户姓名"
                />
                <el-table-column
                  prop="username"
                  header-align="center"
                  align="center"
                  label="登录名称"
                />
                <el-table-column
                  prop="password"
                  header-align="center"
                  align="center"
                  label="密码"
                />
                <el-table-column
                  prop="idCard"
                  header-align="center"
                  align="center"
                  label="身份证号"
                />
              </el-table>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="importExcel()">确 定</el-button>
                <el-button @click="dialogClose">取 消</el-button>
              </span>
            </el-dialog>
          </el-col>
        </el-row>
      </el-form>
    </z-card>
<z-card>
        <el-upload
          class="filter-item"
          style="margin-left: 10px;"
          action=""
          :on-change="handleChange"
          :show-file-list="false"
          :on-remove="handleRemove"
          :file-list="fileListUpload"
          :limit="limitUpload"
          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          :auto-upload="false"
        >
          <el-button
            class="filter-item"
            type="info"
            icon="el-icon-upload2"
            plain
            size="mini"
          >导入
          </el-button>
</z-card>
</template>

这里还需要两个方法handleChange和handleRemove还需要定义

fileListUpload: [],
limitUpload: 3

   // 导入的方法
    importf(obj) {
      this.dialogVisible = true
      const _this = this
      this.file = event.currentTarget.files[0]
      var rABS = false // 是否将文件读取为二进制字符串
      var f = this.file
      var reader = new FileReader()
      FileReader.prototype.readAsBinaryString = function(f) {
        var binary = ''
        var rABS = false // 是否将文件读取为二进制字符串
        var wb // 读取完成的数据
        var outdata
        var reader = new FileReader()
        reader.onload = function(e) {
          var bytes = new Uint8Array(reader.result)
          var length = bytes.byteLength
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i])
          }
          var XLSX = require('xlsx')
          if (rABS) {
            // eslint-disable-next-line no-undef
            wb = XLSX.read(btoa(fixdata(binary)), { // 手动转化
              type: 'base64'
            })
          } else {
            wb = XLSX.read(binary, {
              type: 'binary'
            })
          }
          // outdata就是你想要的东西 excel导入的数据
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
          // excel 数据再处理
          const arr = []
          outdata.map(v => {
            const jsonString = JSON.stringify(v).replace(/\//g, '').replace(/\s/ig, '')
            v = JSON.parse(jsonString)
            const obj = {}
            // xxx代表列名
            obj.realName = v.用户姓名
            obj.username = v.登录名称
            obj.idCard = v.身份证号
            obj.password = v.密码
            arr.push(obj)
          })
          _this.accountList = [...arr]
        }
        reader.readAsArrayBuffer(f)
      }
      if (rABS) {
        reader.readAsArrayBuffer(f)
      } else {
        reader.readAsBinaryString(f)
      }
    },
handleChange(file, fileList) {
      this.fileTemp = file.raw
      const fileName = file.raw.name
      const fileType = fileName.substring(fileName.lastIndexOf('.') + 1)
      // 判断上传文件格式
      if (this.fileTemp) {
        if ((fileType == 'xlsx') || (fileType == 'xls')) {
          this.importf(this.fileTemp)
        } else {
          this.$message({
            type: 'warning',
            message: '附件格式错误，请删除后重新上传！'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请上传附件！'
        })
      }
    },

 handleRemove(file, fileList) {
      this.fileTemp = null
    },

这个页面点击导入会将Excel表格的数据形成一个页面放入table表格中点击确定才能访问接口进入后台只要将accountList传入后台即可下边的主页面列表没有复制,点击导入的页面如下: