通过el-upload结合xlsx获取表格数据

1.npm install xlsx --save

2.通过el-upload上传excel表格文件，代码：

<el-upload action="" :before-remove="beforeRemove" multiple :show-file-list="false" tyle="display: contents" accept=".xls,.XLS,.xlsx,.XLSX" :limit="3" :on-exceed="handleExceed" :http-request="httpRequest"> <el-button size="mini" style="margin-left: 10px">excel导入</el-button> </el-upload>
3.引入xlsx：
import XLSX from 'xlsx'
4.获取上传表格文件的数据函数：
//http-request:覆盖默认的上传行为，可以自定义上传的实现->function类型 httpRequest (e) { let file = e.file // 拿到文件信息 if (!file) { return false } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) { // 这里格式根据自己需求定义 this.$message.error('格式错误，请上传xls或者xlsx格式') return false } const fileReader = new FileReader() fileReader.onload = (ev) => { try { const data = ev.target.result const workbook = XLSX.read(data, { // 以字符编码方式解析 type: 'binary' }) // 获取第一张表 console.log(workbook) const exlname = workbook.SheetNames[0] const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容 console.log(exl) // 将 JSON 数据挂到 data 里 let arr = [] exl.forEach(item => { arr.push(item.name) }) console.log(arr) } catch (e) { console.log('error') return false } } fileReader.readAsBinaryString(file) }