Vue如何实现上传excel获取JSON数据

一、下载依赖xlsx

npm i xlsx

二、引入依赖xlsx

别搞错了，这里需要 * as

import * as XLSX from 'xlsx'

三、配置el-upload 或者其他上传组件（示例用el-upload）

urlUpload 是/api/UploadFile 类似这样的东西

<el-upload ref="uploadRef" :limit="1" multiple :action="urlUpload" accept=".xls,.xlsx" :show-file-list="false" :before-upload="beforeUpload" drag>
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__text">仅支持上传xls/xlsx</div>
            <div class="el-upload__text">一次只能上传一个</div>
</el-upload>

四、获取上传的excel的JSON格式

    beforeUpload(file) {
      // 解析excel
      this.analysisExcel(file).then(async(tableJSON) => {
        if (tableJSON && tableJSON.length > 0) {
          console.log(tableJSON) // 完整数据
          // 只取第一个sheet的数据 一般取这个数据即可
          const dataExcel = tableJSON[0]
          console.log(dataExcel)
        }
      })
      // 防止el-upload触发上传
      return false
    },