1.为什么用inputfile不用elementui原生upload？
el-upload试过必须填action地址给我整不会了。
2.为什么添加一个按钮触发inputfile事件？
原生的inputfile太丑了，看不下去。
3.我要实现什么
实现读取excel中数据转换为对应数据
导入xlsx
npm install xlsx -S
创建组件excelReader
<template>
<div>
<el-button style="height: 30px; margin: 5px 0 0 10px;" size="mini" @click="triggerUpload">上传文件</el-button>
<input
v-show="false"
ref="fileTemp"
type="file"
accept=".xlsx,.xls"
@change="getImportFile"
/>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
data () {
return {
names: [],
}
},
methods: {
// 用按钮触发input上传空间
triggerUpload () {
this.$refs.fileTemp.click()
},
// 获取文件
getImportFile () {
if (this.$refs.fileTemp && !this.$refs.fileTemp.files[0]) return false
const selectedFile = this.$refs.fileTemp.files[0]
this.readFile(selectedFile)
},
// 将文件转换成 JSON
readFile (file) {
const that = this
const reader = new FileReader()
reader.onload = function (e) {
const wb = XLSX.read(e.target.result, { type: 'binary' }) // 读取文件
const wbSheetName = wb.SheetNames[0]
const wbSheet = wb.Sheets[wbSheetName]
// 解析文件 {defval: ''}=>防止单元格为空的时解析出来的结果缺少相应的key
const selectFileData = XLSX.utils.sheet_to_json(wbSheet, { defval: '' })
if (!selectFileData.length) {
that.$message.warning(`上传的文件数据为空！`)
return false
} else {
that.$message.success(`读取文件成功！`)
}
// 对获取到的对象数组进行操作
for (let i = 0; i < selectFileData.length; i++) {
delete selectFileData[i].__EMPTY
}
// 将对象数组 转换成 JSON类型，这一块我只选了名称，各位自行筛选
const names = []
for (const data of selectFileData) {
names.push(data['名称'])
}
that.$emit('transName2Ids', names)
}
reader.readAsBinaryString(file)
},
},
}
</script>
<style scoped>
</style>
父组件引入，其中transName2Ids是父组件处理数据的方法
<excel-read @transName2Ids="transName2Ids"></excel-read>
实现效果
?
?
?
