如题
参考
iview-admin导入excel组件
iview-excel导入数据库数据
springboot实现excel的上传并解析文件内容
注:此文并不涉及前后端文件上传,可参考大神的Spring Boot + Vue 前后端分离,两种文件上传方式总结,我也根据这篇做出来的
废话不说,直接上代码
一、准备工作介绍
我上传的excel是这样的:xlsx(xls也可以),第一行列名,一共五行数据,两列
二、前端
<style lang="less">
@import "./common.less";
</style>
<template>
<div>
<Card title="导入EXCEL">
<Row>
<Upload action="" :before-upload="handleBeforeUpload" accept=".xls, .xlsx">
<Button icon="ios-cloud-upload-outline" :loading="uploadLoading" @click="handleUploadFile">读取文件</Button>
</Upload>
<Button @click="importData" type="info" style="margin-left:15px">上传</Button>
</Row>
<Row>
<div class="ivu-upload-list-file" v-if="file !== null">
<Icon type="ios-stats"></Icon>
{
{
file.name }}
<Icon v-show="showRemoveFile" type="ios-close" class="ivu-upload-list-remove" @click.native="handleRemove()"></Icon>
</div>
</Row>
<Row>
<transition name="fade">
<Progress v-if="showProgress" :percent="progressPercent" :stroke-width="2">
<div v-if="progressPercent == 100">
<Icon type="ios-checkmark-circle"></Icon>
<span>成功</span>
</div>
</Progress>
</transition>
</Row>
</Card>
<Row class="margin-top-10"