前端利用el-upload实现Excel导入

首先说明一下这里前端只是前端利用el-upload上传了Excel文件，excel的解析工作是由后端同事利用阿里的easyexcel来解析的，所以说这个方法只适用于后端解析excel的方式。下边是效果图：

可以点击上传Excel也可以拖拽，样式可根据个人需要修改。

下边是组件代码：

<template>
<div class="upload-excel">
    <el-upload
        drag
        class="upload-demo"
        name="excel"
        action="https://www.sunots.shop/easyExcel/import"
        :on-error="uploadFalse"
        :on-success="uploadSuccess"
        :before-upload="beforeAvatarUpload"
        :limit="1"
         accept=".xlsx,.xls"
        :show-file-list="false"
        :headers="headerObj"
        :file-list="fileList">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <!-- <el-button icon="el-icon-edit" type="primary">批量上传</el-button> -->
         <div slot="tip" class="el-upload__tip">只能上传Excel文件且上传模板大小不能超过 10MB!</div>
       </el-upload>
</div>
</template>

这里讲一下上边属性配置
name是定义文件的名字，将导入的文件名传给后端，后端接口也要这个名字
action是上传的路径，这里我是写死的，可自行灵活配置
on-error是上传失败时的钩子，可以用来显示错误消息
on-success是上传成功事件，通过里边的respone参数判断上传成功或失败
before-upload是文件上传之前的钩子，用来对文件进行上传前的大小类型判断
limit是允许最大上传个数
accept是指定上传的文件类型
show-file-list定义是否显示已上传文件列表，类型是布尔值，我这里效果是不让显示上传文件列表
headers是设置上传的请求头部 token
drag 启用拖拽上传
file-list 定义上传的文件列表，我这里写多余了因为我也不展示

下边是引入的token和data中定义的数据

import { getToken } from '@/utils/auth'
data() {
return {
    headerObj: {
        token: getToken()
      },
    fileList: []
};

下边是js代码几个事件

// 上传成功事件
     uploadSuccess(response, file, fileList) {
      console.log(response)
      if (response.stat == 1) {
        this.$message({
          message: response.msg,
          type: 'success'
        });
        this.$router.back()  //这里我是单独一个页面的上传组件，成功后返回上一个页面
      } else {
        this.$message({
          message: response.msg,
          type: 'error'
        });
      }
    },
    // 上传失败时的钩子
    uploadFalse(response, file, fileList) {
      this.$message({
          message: 'excel文件上传失败！',
          type: 'error'
        });
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload(file) {
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const isLt10M = file.size / 1024 / 1024 < 10;
         if (!extension && !extension2) {
           this.$message({
            message: '上传模板只能是 xls、xlsx格式!',
            type: 'error'
           });
          }
          if (!isLt10M) {
           console.log("上传模板大小不能超过 10MB!");
           this.$message({
            message: '上传模板大小不能超过 10MB!',
            type: 'error'
          });
         }
        return extension || extension2 || isLt10M
    },