前言
数据处理已经成为了各行各业必不可少的工作。然而,手动输入数据费时费力,容易出错,因此,我们需要一种高效、准确、方便的方式来导入数据。而 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()//调用表格方法,刷新页面
})
}
},
},
至此导入的功能就实现啦!