补充:下方所有内容只涉及解析 JSON格式!
<template>
<div>
<el-upload
:multiple='false'
name="upfile"
:on-change="getChange"
list-type="multipart/form-data"
>
<el-button size="small"
type="primary">新增</el-button>
<div slot="tip"
class="el-upload__tip">只能上传txt/csv文件,批量新增</div>
</el-upload>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
methods: {
getChange(file, fileList){
//声明一个文件读取器
var excelData = []
const fileReader = new FileReader()
//读取文件
fileReader.readAsText(file.raw,'utf-8')
//文件读取成功时触发事件
fileReader.onload=ev=>{
try{
//读取的文件
const data = ev.target.result
//以二进制流方式读取得到整份excel表格
const workbook = XLSX.read(data,{type:'binary'})
// 循环遍历excel的sheet
Object.keys(workbook.Sheets).forEach((sheet,index)=>{
console.info(workbook.Sheets[sheet]['!ref'])
excelData.push(
//将excel 转换成json对象放入数组中
...XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
)
})
this.data = excelData
console.log(excelData)
}catch(e){
console.err('文件类型不正确')
}
}
},
},
}
</script>
<style lang="scss" scoped>
</style>
结果展示:
只涉及到上传文件 并转为JSON格式