前端上传excel文件转json数据

1、安装xlsx命令: npm i xlsx -D

2、新建testExcelToJson.vue文件

3、复制下面代码

<template>
    <div>
        <!-- 为了测试@change -->
        <input type="text" v-model="message" @change="handleInput">
        <p>{{ message }}</p>
        <!-- 测试上传xlsx文件是否成功 -->
        <input type="file" @change="handleInput">
    </div>
</template>
<script>
//安装xlsx命令: npm i xlsx -D
import * as XLSX from "xlsx"
export default {
    data() {
        return {
            message: ''
        };
    },
    methods: {
        handleInput(e) {
            let fileObj = e.target.files[0];
            // console.log(fileObj);

            //FileReader对象就是专门操作二进制数据的，主要用于将文件内容读入内存
            const fileReader = new FileReader();
            //.readAsArrayBuffer,读取指定的Blob或File内容
            fileReader.readAsArrayBuffer(fileObj);

            fileReader.onload = (event) => {
                const fileData = event.target.result;
                //从电子表格中提取数据
                const workbook = XLSX.read(fileData, {
                    type: "binary",
                })
                //按选项卡顺序列出工作表名称
                const wsname = workbook.SheetNames[0];

                //从工作表创建js值数组
                const sheetJson = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
                console.log(sheetJson);

                var stuName = [];
                for (var i = 0; i < sheetJson.length; i++) {
                    const obj = {
                        'name': sheetJson[i].姓名
                    };
                    stuName.push(obj);
                }
                console.log(stuName);
            }
        }
    }
};
</script>

原视频链接：前端的导入Excel，解析为json，使用xlsx_哔哩哔哩_bilibili