vue与element实现excel文件导入，让表格数据处理更高效

前言

数据处理已经成为了各行各业必不可少的工作。然而，手动输入数据费时费力，容易出错，因此，我们需要一种高效、准确、方便的方式来导入数据。而 excel 是一个广泛使用的数据处理工具，因此，将 excel 文件导入到表格中已经成为了一个常见的需求。本文将介绍如何使用 vue 基于 element 实现 excel 文件导入到表格中的功能。

---

先看实现效果

---

实现思路：

其实主要是通过 element 中 upload 组件的 @on-change 事件，通过请求后台的导入接口，传给后台所需要的参数即可实现。话不多说，下面直接上实例代码。

---

html

属性	描述
action	必选参数，上传的地址
auto-upload	是否在选取文件后立即进行上传，通过true、false控制
multiple	是否支持多选文件，通过true、false控制
show-file-list	是否显示已上传文件列表，通过true、false控制
file-list	上传的文件列表
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

<div class="ChannelStyle">
     <el-upload action="" :auto-upload="false" :multiple="false" :show-file-list="false" :on-change="uploadByJsqd" :file-list="fileList" >
       <el-button type="primary" size="mini">导入</el-button>
     </el-upload>
</div>

data

data() {
    return {
      fileList: [],//上传的文件列表
    }
  },

js

methods: {
      //文件校验方法
      beforeAvatarUpload(file) {
        // 通过split方法和fileArr方法获取到文件的后缀名
        let fileArr = file.name.split('.')
        let suffix = fileArr[fileArr.length - 1]
        //只能导入.xls和.xlsx文件
        if (!/(xls|xlsx)/i.test(suffix)) {
          this.$message('文件格式不正确')
          return false
        }
        //不能导入大小超过2Mb的文件
        if (file.size > 2 * 1024 * 1024) {
          this.$message('文件过大，请上传小于2MB的文件〜')
          return false
        }
        return true
      },
      //文件发生改变就会触发的事件
      uploadByJsqd(file) {
        //判断是否符合beforeAvatarUpload方法中的条件
        if (this.beforeAvatarUpload(file)) {
          this.fileList.name = file.name
          this.fileList.url = ''
          var formdata = new FormData()
          formdata.append('file', file.raw)
          //importDevice：请求接口 formdata：传递参数
          importDevice(formdata).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.getList()//调用表格方法，刷新页面
          })
        }
      },
    },

至此导入的功能就实现啦！