vue2 - 基于Element UI实现上传Excel表单数据功能

离奇6厘米

已于 2022-11-25 19:12:37 修改

阅读量4.4k

点赞数 2

分类专栏： vue+组件库文章标签： ui excel javascript vue

于 2022-11-24 16:46:29 首次发布

本文链接：https://blog.csdn.net/vest_er/article/details/128009087

版权

一、项目场景

批量数据上传后台，需要从后台下载一个固定格式的 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); // 调用上传接口