前端实现excel文件上传，处理好数据传给后端

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

最近写了一个excel文件上传需求,需要处理好数据再传递给后端，头疼了半天才完成。因为之前做的都是后端做处理数据的，所以只能去想办法实现了，本来就快秃了，还要抓头发。言归正传，开搞。

1. 首先先撸一个上传的组件

直接使用element UI的upload组件

    <template>
      <div>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :before-upload="beforeUpload"
            :limit="1"
            :on-success="handleSuccess"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
      </div>
    </template>

    <script>
    export default {
        name: 'test1',
        data () {
            return {
                fileList: []
            }
        },
        methods: {
            beforeUpload(fiel) {
              // 上传前逻辑... 
            },
            handleSuccess(res, fiel, fileList) {
              // 成功逻辑...
            },
            handleRemove(file, fileList) {
              // 删除逻辑...
            },
            beforeRemove(file, fileList) {
              return this.$confirm(`确定移除 ${ file.name }？`);
            }
        }
    }
    </script>

    <style>

    </style>

2. upload组件就OK了

3. 处理Excel数据部分代码封装

3.1 安装 xlsx

npm install xlsx --save

3.2 如果使用中报错如下

问题是xlsx版本导致的报错，降低一下版本就OK
npm install xlsx@0.16.8

3.3 处理数据代码如下

在utils创建一个transformExcel文件

    import XLSX from 'xlsx'
    import { Message } from 'element-ui'

    export const transformExcel = f => {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = e => {
          let data = []
          const { result } = e.target
          try {
            // 以二进制流读取整份Excel表格对象
            const workbook = XLSX.read(result, { type: 'binary' })

            // 遍历工作表进行读取（默认是第一张表）
            for (const sheet in workbook.Sheets) {
              if (workbook?.Sheets?.hasOwnProperty(sheet)) {
                // 处理好的数据
                data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))
              }
            }
          } catch (err) {
            Message.error('文件类型不正确')
            return
          }
          // 最终的结果
          resolve(data)
        }
        // 以二进制的方式打开
        reader.readAsBinaryString(f)
      })
    }

4.使用组件

    <template>
      <div>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :before-upload="beforeUpload"
            :limit="1"
            :on-success="handleSuccess"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
      </div>
    </template>

    <script>
    // 引入组件
    import { transformExcel } from '../../utils/transformExcel'
    export default {
        name: 'test1',
        data () {
            return {
                fileList: []
            }
        },
        methods: {
            // 使用transformExcel方法
            async beforeUpload(fiel) {
                // 返回处理后的结果
                const res = await transformExcel(fiel)
                console.log('res', res);
            },
            handleSuccess(res, fiel, fileList) {
              // 成功逻辑...
            },
            handleRemove(file, fileList) {
              // 删除逻辑...
            },
            beforeRemove(file, fileList) {
              return this.$confirm(`确定移除 ${ file.name }？`);
            }
        }
    }
    </script>

    <style>

    </style>

5. 上传的表格数据

6. 最终的结果

小结

本文写的只是满足需求而已，具体详细的得自由发挥哈，如果有错误欢迎在评论区指出。