前端上传的excel文件内容

‘input type=file’ 形式

<template>
    <div>
        <input type="file" @change="importFile" id="imFile" style="display:none"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
        <el-button type="primary" @click="importExcel()" size="small">导入excel</el-button>
    </div>
</template>

<script>
import XLSX from 'xlsx' 
export default {
    data(){
        return {
            importData:'',
            wb:''
        }
    },
    methods:{
        importExcel(){
            document.getElementById('imFile').click()
        },
        importFile: function(e) {
            let obj = e.target
            if(e.target.files.length==0) {
                console.log("没有获取到导入内容")
                return
            }
            var f = obj.files[0]
            var reader = new FileReader()
            reader.readAsBinaryString(f)
            reader.onload = (e) => {
                var data = e.target.result //获取上传的文件数据
                this.wb = XLSX.read(data, {
                    type: 'binary'
                })
                this.importData = XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]])
                //至此已完成对上传excel的内容解析 然后可以直接把这个对象数组传给后端
                console.log("this.importData is:",this.importData)
                // this.uploadExcelData()
            }
        },
        uploadExcelData(){
            this.imFile.value = ''
            this.$post('/recharge/import',data).then(
                res => {
                    if(res.code == 'success'){
                        this.$notify({title: '成功', message: '导入成功!', type: 'success'})
                        this.queryData()
                        this.fullscreenLoading = false
                    }else(
                        this.$alert(res.message, '导入失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.fullscreenLoading = false
                                this.queryData()
                            }
                        })
                    )
                }
            ).catch(err => {
                console.log("err is:",err)
                this.$notify.error({ title: '错误', message: '抱歉，导入失败!'})
                this.fullscreenLoading = false
            })
        }
    }
}
</script>

elementui 上传组件

<template>
    <div>
        <!-- <el-upload style="display: inline" action="" :show-file-list="false" :on-change="uploadExcel_change">
            <el-button size="small" type="primary">导入excel</el-button>
        </el-upload> -->
        <el-upload style="display: inline" action="" :show-file-list="false" :http-request="uploadExcel_repuest">
            <el-button size="small" type="primary">{{uploadText}}</el-button>
        </el-upload>
    </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
    props:{
        uploadText: {
            type: String,
            require: true,
            default: '导入'
        },
        api: {
            type: String,
            require: true,
            default: '/'
        }
    },
    data(){
        return {
            importData: '',
            wb: ''
        }
    },
    methods: {
        uploadExcel_repuest(content){
            var reader = new FileReader()
            reader.readAsBinaryString(content.file)
            reader.onload = (e) => {
                let data = e.target.result //获取上传的文件内容
                this.wb = XLSX.read(data, {
                    type: 'binary'
                })
                this.importData = XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]])
                console.log("解析到的excel数据为:",this.importData)
            }
        },
        uploadExcel_change(content){
            var reader = new FileReader()
            reader.readAsBinaryString(content.raw)
            reader.onload = (e) => {
                let data = e.target.result //获取上传的文件内容
                this.wb = XLSX.read(data, {
                    type: 'binary'
                })
                this.importData = XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]])
                console.log("解析到的excel数据为:",this.importData)
            }
        },
        uploadExcelData(data){
            this.imFile.value = ''
            this.$post(this.api,data).then(
                res => {
                    if(res.code == 'success'){
                        this.$notify({title: '成功', message: '导入成功!', type: 'success'})
                        this.queryData()
                        this.fullscreenLoading = false
                    }else(
                        this.$alert(res.message, '导入失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.fullscreenLoading = false
                                this.queryData()
                            }
                        })
                    )
                }
            ).catch(err => {
                console.log("err is:",err)
                this.$notify.error({ title: '错误', message: '抱歉，导入失败!'})
                this.fullscreenLoading = false
            })
        }
    }
}
</script>