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

最新推荐文章于 2024-04-16 15:12:00 发布

LewisRoc

最新推荐文章于 2024-04-16 15:12:00 发布

阅读量2k

点赞数 2

分类专栏：前端Excel导入文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_48612307/article/details/118251559

版权

首先说明一下这里前端只是前端利用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">