- xlsx
- element-ui
安装xlsx
npm install xlsx --save
引入
可能会报错: annot read properties of undefined (reading 'read')
import xmlx from 'xmlx'
报错尝试这样引入
import * as XLSX from 'xlsx/xlsx.mjs'
代码逻辑
- 上传组件传入excel文件
- 上传前处理文件,转为二进制
- xmlx插件解析并转换为json对象
- 拿到json数据封装上传到后台接口
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
accept=".xlsx,.xls"
:auto-upload="false"
:show-file-list="false"
:on-change="importExcel"
>
<el-button type="primary" slot="trigger">选取EXCEL文件</el-button>
</el-upload>
----------------------------------------------------------------------------------------------
methods:{
importExcel(ev) {
debugger
let file = ev.raw;
if (!file) return;
//读取FILE中的数据
this.readFile(file).then(data => {
let workbook = XLSX.read(data, {type: "binary"})
console.log(workbook);
});
},
readFile(file) {
return new Promise(resolve => {
let reader = new FileReader()
reader.readAsBinaryString(file)
reader.onload = ev => {
// workbook打印出数据,表示成功
resolve(ev.target.result)
}
})
}
}
上传数据库,自行处理

本文介绍如何利用xlsxelement-ui进行Excel文件的上传与解析,包括安装xlsx库、处理文件上传及转换为JSON对象的过程。
1888

被折叠的 条评论
为什么被折叠?



