基于vue-element的el-upload文件导入数据处理

<template>的组件使用

<template>
  <div>
        <div class="grid-content bg-purple-dark">
              <div class="demo-input-suffix">
                {{ $t('文件导入') }}：
                <!-- 按钮 -->
                <el-upload
                  :multiple="false"
                  :show-file-list="false"
                  :http-request="httpRequest"
                  class="upload"
                  action=""
                  accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                  <el-button >{{ $t('选择文件') }}</el-button>
                  <el-tooltip :content="$t('文件大小不超过5M，支持.xlsx文件格式；文件内容为一列手机号码。示例: 手机号码 13671873945 13768426384')" class="item" effect="dark" placement="top">
                    <i class="el-icon-question"/>
                  </el-tooltip>
                </el-upload>
                <el-button type="text" @click="downloadTemplate">{{ $t('下载模板') }}</el-button>
                <!-- 按钮 end -->
              </div>
            </div>
  </div>
</template>

util.js处理导入的文件，获取文件数据。这里使用Promise，主要是通过resolve(exl)，在回调函数里面添加处理逻辑。其中exl就是回调函数的入参

// 读取导入的  Excel数据,fileReader.onload是异步方法，使用回调函数获取值
  // utils.httpRequest(e).then(function (exl) {
  //   if (exl && exl.length > 0) {
  //    }
  // });
  httpRequest(e) {
    return new Promise(function(resolve, reject) {
      // 文件对象
      const file = e.file
      if (!file) {
        // 没有文件
        return false
      } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
        // 格式根据自己需求定义
        this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
      }
      const fileReader = new FileReader()
      fileReader.readAsBinaryString(file)
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary' // 以字符编码的方式解析
          })
          const exlname = workbook.SheetNames[0] // 取第一张表
          const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
          resolve(exl)
        } catch (e) {
          console.log('出错了：：')
          return false
        }
      }
    })
  },

js交互，在回调函数里面完成后续逻辑处理

// 读取导入的表格数据
    httpRequest(e) {
      var self = this
      utils.httpRequest(e).then(function(excelDataList) {
        // 总导入用户数
        var memberCount = excelDataList.length
       .......
      })
    },

导入文件

回调函数的入参excelDataList：

[
    {"手机号码"：12000000058}，
     {"手机号码"：12000000061}，
     {"手机号码"：12000000063}，
     {"手机号码"：12000000066}
]