先导入xlsx
npm install xlsximport as XLSX from "xlsx"; // vue3可用此引入上传组件用了element-plus的el-upload组件
<template> <el-upload class="upload-demo" action="" drag :auto-upload="false" :on-change="uploadChange" :limit="1" > <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> </el-upload></template>代码实现部分
<script lang="ts">import { defineComponent } from "vue";import as XLSX from "xlsx"; // vue3可用此引入export default defineComponent({ name: "upload", setup() { const uploadChange = async (e) => { console.log(e); const files = e.raw; if (files.length <= 0) { return false; } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) { console.log("上传格式禁绝确，请上传xls或者xlsx格式"); return false; } // 读取表格 const fileReader = new FileReader(); fileReader.onload = (ev) => { const workbook = XLSX.read(ev.target.result, { type: "binary", }); const wsname = workbook.SheetNames[0]; const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); // console.log(ws); // 转换成json的数据 const m = dealExcel(ws) // ...对数据进行自己须要的操作 console.log(m) }; fileReader.readAsBinaryString(files); }; const dealExcel = (ws) => { let keymap = { // 我们要转换的开头 菜名: "dishes", 先容: "introduce", 配料: "ingredients", 标签: "label", 提示: "tips", 水平: "hor", 办法: "way", 韶光: "time", 风味: "flavor", 步骤: "steps" } ws.forEach((sourceObj) => { let arr = new Array() Object.keys(sourceObj).map((keys) => { if(keys.includes('步骤')) { arr.push(sourceObj[keys]) delete sourceObj[keys] } else if (keymap[keys]) { sourceObj[keymap[keys]] = sourceObj[keys] delete sourceObj[keys] } }) sourceObj['steps'] = arr }) return ws } return { uploadChange, } }})</script>结果
先读取file文件，然后通过判断后缀来区分是不是excel文件
接着读取数据并转换成json格式
dealExcel这个函数，用于处理表格里的中文表头，把它转化成对应的key值
末了须要处理多个步骤，把这些步骤转化成一个array数组，并输出出来。。
末了末了，前端这边最多只能进行5万旁边的数据流，太多浏览器就会崩溃了，有大佬有优化的方法，烦请教教我。
末了公众年夜众号：小何发展，佛系更文，都是自己曾经踩过的坑或者是学到的东西
有兴趣的小伙伴欢迎关注我哦，我是：何小玍。大家一起进步鸭
