vue+js+xlsx解析导入xlsx表格、解决el-upload只上传一次问题

需求：前端导入xlsx表格，并解析成table数据传参给二级页面

最后解决代码：

导入插件： npm install xlsx --save

this.$toast({})是封装的信息弹窗组件

<el-upload
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :auto-upload="false"
          :show-file-list="false"
          :limit="1"
          accept=".xls,.xlsx"
          :on-change="changeHandle">
          <div class="button purpleMinor">批量分配</div>
        </el-upload>
<script>
var XLSX = require("xlsx")
changeHandle(file,fileList) {
      this.$refs.upload.clearFiles() // 上传成功之后清除历史记录
      console.log(file,'file')
      console.log(fileList,'fileList')
      let type = file.name.replace(/.+\./, '') // 文件类型
      var listTable = []
      if(['xls','xlsx'].indexOf(type.toLowerCase()) === -1) {
        this.$toast({
          title: '操作失败',
          icon: 'error',
          content: '文件格式支持xls、xlsx!'
        })
        return false;
      }else {
        const fileReader = new FileReader()
        fileReader.onload = ev => {
          try {
            console.log(ev,'ev')
            const data = ev.target.result
            console.log(XLSX,'XLSX')
            const workbook = XLSX.read(data,{type: "binary"})
            console.log(workbook,'workbook')
            console.log(workbook.Sheets,'Sheets')
            console.log(workbook.SheetNames,'SheetNames')
            // 这里是控制获取第几个Sheet表的数据
            const firstSheetName  = workbook.SheetNames[0]
            console.log(firstSheetName,'firstSheetName')
            // 获取还未处理的表格的数据
            const workSheet = workbook.Sheets[firstSheetName ]
            console.log(workSheet,'workSheet')
            //  生成json表格内容
            const ws = XLSX.utils.sheet_to_json(workSheet)
            console.log(ws,'ws')
            // 如果表格存在数据
            if(ws && ws.length) {
               for(let item in ws) {
                let rowTable = {}
                //这里的rowTable的属性名注意要与上面表格的prop一致
                //sheetArray的属性名与上传的表格的列名一致
                rowTable.userName = ws[item].设备使用者
                rowTable.deviceId = ws[item].设备编码
                if(!rowTable.userName || !rowTable.deviceId) { // 表格数据某一项为空
                  this.$toast({
                    title: '操作失败',
                    icon: 'error',
                    content: '表格数据格式错误！'
                  })
                  return false
                }else {// 表格数据都不为空
                  listTable.push(rowTable)
                }
              }
              this.$router.push({ path: '/equipment/distribute/assign', query: { selectedList: listTable }})
              console.log(listTable,'listTable')
            }else { // 如果表格不存在数据，则弹出提示信息
              this.$toast({
                title: '操作失败',
                icon: 'error',
                content: '表格暂无数据！'
              })
            }
          }catch(e) {
            console.log(e,'eeeeeeeeeeeeee')
            this.$toast({
              title: '操作失败',
              icon: 'error',
              content: '分配模板导入失败！'
            })
          }
        }
        fileReader.readAsBinaryString(file.raw)
      }
    },
</script>

总结：

1、使用 import XLSX from "xlsx"导入xlsx插件，发现打印的XLSX为undefined，解决办法是用这种方法：var XLSX = require("xlsx")

2、发现只能上传一次文件，第二次上传不成功，主要原因是第一次上传文件后，浏览器还保存着我们已经上传的文件，所以要想继续上传文件，解决办法：在on-change钩子函数中通过ef 拿到它的document元素进行清除已经上传的文件