vue封装组件进行前端excel文件上传解析成对应数组

组件getXlsxFile.vue

<!--获取XLSX文件通用组件-->
<template>
  <span style="width: 100px">
    <a-button type="primary" icon="plus" @click="mockClick()" >批量导入</a-button>
    <!--style="visibility: hidden;width: 1px"-->
    <form id="fileForm" style="display: inline-block">
      <input type="file"
             id="File"
             style="visibility: hidden;width: 1px"
             v-on:change="getFileData($event)">
    </form>
  </span>
</template>

<script>
  import XLSX from 'xlsx'

  export default {
    name: 'getXlsxFile',
    props: {
      fields: {
        type: Array,
        default: () => {
          return []
        }
      },
      visible: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        file: ''
      }
    },
    created () {

    },
    watch: {
      fields: {
        handler(n) {
          document.getElementById('fileForm').reset()
        }
      }
    },
    mounted() {

    },
    methods: {
      mockClick() {
        document.getElementById('fileForm').reset()
        document.getElementById('File').click()
      },
      getFileData (e) {
        let files = e.target.files
        let field = this.fields

        let fileReader = new FileReader()
        if (files.length != 0) {
          fileReader.readAsBinaryString(files[0])
        }
        let data = null
        let workbook = null
        let persons = []
        let newarray = []
        // console.log(fileReader)
        fileReader.onload = (ev) => {
          try {
            data = ev.target.result
            workbook = XLSX.read(data, {
              type: 'binary',
              cellDates:true//设置未true 将天数转为时间格式
            })
            this.$message.info('正在读取文件...')
            // let persons = [];
          } catch (ev) {
            this.$message.error("导入失败,缺失配置文件或配置文件读取错误!")
            return;
          }

          let fromTo = ''
          let array = []
          let entity = {}

          for (let sheet in workbook.Sheets) {
            if (workbook.Sheets.hasOwnProperty(sheet)) {
              fromTo = workbook.Sheets[sheet]['!ref']
              console.log(fromTo)
              persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))
            }
          }

          if (persons.length<2){
            this.$message.error("导入失败,未读取到附件内数据!")
            return;
          }

          for(let y = 0;y<Object.keys(persons[0]).length;y++){
            let name = Object.keys(persons[0])[y]
            entity[name] = ''
          }
          // for (let j = 0; j < persons.length-1; j++) {
          //   for(let z = 0;z<Object.keys(persons[j]).length;z++){
          //     if (persons[j][Object.keys(persons[j])[z]]){
          //       entity[Object.keys(persons[j])[z]] = persons[j][Object.keys(persons[j])[z]];
          //     }else{
          //       entity[Object.keys(persons[j])[z]] = " "
          //     }
          //   }
          //   array.push(entity)
          // }
          array = persons
          console.log(array);

          for(let ar = 0;ar<array.length; ar++){
            let newentity = {}
            for(let yy = 0;yy<Object.keys(persons[0]).length;yy++){
              let name1 = Object.keys(persons[0])[yy]
              for(let fi = 0;fi<field.length;fi++){
                if(field[fi].name==name1){
                  newentity[field[fi].val] = array[ar][name1]
                  break
                }
              }
            }
            newarray.push(newentity)
          }

          this.$emit('fileData',newarray)
        }
      }
    }
  }
</script>

<style lang="less" scoped>

</style>

引用
各自写对应的位置（我想大家应该知道）

		<get-xlsx-file
          :fields="detailInfo"
          @fileData="getFileData"
        >
        </get-xlsx-file>


import getXlsxFile from '@/views/main/common/getXlsxFile'

export const Ttb02fields = [
  {span:'2',name:'主键',val:'id'},
  {span:'2',name:'操作单号（版本号）',val:'applyNum'},
  {span:'2',name:'操作日期',val:'applyDate'},
  {span:'2',name:'操作人',val:'applyName'},
  {span:'2',name:'操作部门',val:'applyDeptName'},
  {span:'2',name:'操作人id',val:'applyId'},
  {span:'2',name:'操作部门id',val:'applyDeptId'},
  {span:'2',name:'资产年份',val:'fundYear'},
  {span:'2',name:'资产金额（万元）',val:'fundNum'},
  {span:'2',name:'排序号',val:'sort'},
  {span:'2',name:'备注',val:'remarks'},
  {span:'2',name:'创建时间',val:'createdTime'},
  {span:'2',name:'创建人id',val:'createdUserId'},
  {span:'2',name:'修改时间',val:'modifiedTime'},
  {span:'2',name:'修改人id',val:'modifiedUserId'},
  {span:'2',name:'删除标识，0表示正常，1表示已删除',val:'isDeleted'},
]

 components: {
      getXlsxFile
    },
    return{
    detailInfo: Ttb02fields,
}

 getFileData(obj) {
        console.log(obj,'XSLX')
    }

obj就是最后的解析数组
根据列名进行的对象匹配，务必需要一字不差
例列名备注==Ttb02fields 的备注对应remarks
然后丢后台直接保存