记录一下导入excel文件的使用，现在导入excel的话大部分使用的都是 xlsx 插件，导入的话只需要下载一个xlsx包就行
$ npm i xlsx
也是根据网上看到的教程做下去的，下面是具体的步骤：
1.先封装一个读取二进制文件的方法
// 把文件按照二进制方式读取
export const readFile = file =>{
return new Promise(resolve => {
let reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = ev =>{
resolve(ev.target.result)
}
})
}
2.使用element里面的el-upload来上传文件的
<el-upload
action
accept='.xls,.xlsx'
:auto-upload='false'
:on-change='inputFile'
:show-file-list='false'
>
Tips:
1.action：必选参数，上传的地址，这边因为不需要立即上传所以就没有写地址，但是这个参数必须要有；
2.accept ： 接受上传的文件类型（thumbnail-mode 模式下此参数无效）；
3.auto-upload：是否在选取文件后立即进行上传，我这边是不需要，写的false；
4.show-file-list：是否显示已上传文件列表，这边也是不需要的就写的false；
5.on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用，主要就是获取到上传文件后返回的里面的 raw
读取文件列表image.png
3.主要实现的代码
// 导入文件
async inputFile(e){
console.log(e)
this.inputFileName = e.name
let file = e.raw
if(!file) return
console.log(file)
// 读取file文件的内容(转换为json格式)
let data = await readFile(file)
console.log(data) //解析出的二进制文件
// type :'binary' 类型为二进制
let eleData = xlsx.read(data,{type:"binary"})
console.log(eleData)
let eleDataSheet = eleData.Sheets[eleData.SheetNames[0]]
eleData = xlsx.utils.sheet_to_json(eleDataSheet) // 将解析出的数据转换为json格式（xlsx自带的方法）
// eleData = eleData.length >1? eleData[1] : eleData[0]
console.log(eleData)
const arr =[]
console.log(Object.keys(changeCnToEn))
eleData.forEach(item =>{
const userInfo = {}
// console.log(Object.keys(item))
Object.keys(item).forEach(key => {
userInfo[changeCnToEn[key]] = item[key]
})
// console.log(userInfo)
arr.push(userInfo)
})
this.tableLIst = arr
console.log(arr)
}
}
}
Tips:关键代码的解释
- 使用前面封装的readFile将文件转换为二进制形式，使用slsx的read方法将，指定其type:binary(指定读取的类型为二进制文件）**
let data = await readFile(file)
console.log(data) //解析出的二进制文件
// type :'binary' 类型为二进制
let eleData = xlsx.read(data,{type:"binary"})
console.log(eleData)
转换完成的数据
image.png
2.我们主要获取的是sheets里面的数据
// 获取Sheets里面的第一条数据，就是excel表中下面第一页的数据
let eleDataSheet = eleData.Sheets[eleData.SheetNames[0]]
excel表中第一页
image.png
3.使用slsx自带的方法sheet_to_json将其转换为json数据
eleData = xlsx.utils.sheet_to_json(eleDataSheet) // 将解析出的数据转换为json格式（xlsx自带的方法）
获取到的数据
image.png
4.可以看到此时的数据已经转换完成了，但他们都是中文的，但是我们需要传到后端的数据肯定不能都是中文，所以需要在进行一次转换
// 转换的方法
const arr =[]
eleData.forEach(item =>{
const userInfo = {}
Object.keys(item).forEach(key => {
// key为中文，在changeCnToEn 中拿到中文对应的英文，在遍历的item
//中获取到中文对应的数据
userInfo[changeCnToEn[key]] = item[key]
})
arr.push(userInfo)
})
// 转换传入的excel中文到英文
export const changeCnToEn = {
'关系':'relation',
'失能情况':'Disability',
'姓名':'Name',
'慢性病':'chronicDsease',
'所在区县':'DistrictCounty'
}
将里面的中文全部都转换为对应的英文
转换后的数据image.png
