前端上传excel文件并解析内容为json格式

效果图如下：

1. 页面效果：

2. 数据解析效果

上代码

## **html部分**
<template>
  <div class="dpf uploadBox">
    <el-input :value="fileName" style="width: 84%"></el-input>
    <el-upload
      ref="upload"
      class="upload-demo"
      action
      accept=".xlsx,.xls"
      :auto-upload="false"
      :before-upload="beforeUpload"
      :on-change="handleChange"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :show-file-list="false"
    >
      <el-button type="text" size="small">上传Excel</el-button>
    </el-upload>
  </div>
</template>

<script>
import * as XLSX from "xlsx/xlsx.mjs";  // 需要安装这个三方包后引入
export default {
  data() {
    return {
      fileName: "",
      idList:[],
    };
  },
  methods: {
    // 文件读取
    readFile(file) {
      return new Promise((resolve) => {
        let reader = new FileReader();
        reader.readAsBinaryString(file); //以二进制的方式读取
        reader.onload = (ev) => {
          resolve(ev.target.result);
        };
      });
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUpload(file) {
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
      }
    },

    // 文件状态改变
    async handleChange(ev) {
      this.fileName = ev.name;
      let file = ev.raw;
      if (!file) {
        console.log("文件打开失败");
        return;
      } else {
        let data = await this.readFile(file);
        let workBook = XLSX.read(data, { type: "binary" }); //解析二进制格式数据
        console.log("二进制数据的解析:");
        console.log(workBook);
        let worksheet = workBook.Sheets[workBook.SheetNames[0]]; //获取第一个Sheet
        let result = XLSX.utils.sheet_to_json(worksheet); //json数据格式
        console.log("最终解析的 json 格式数据:");
        console.log(result);
        this.idList = result.map(item=>{
          return item.id
        })
        console.log(this.idList);
      }
    },

    // 删除文件
    handleRemove(file, fileList) {
      this.fileList = [];
    },
    // 文件上传成功
    handleSuccess(res, file, fileList) {
      this.$message.success("文件上传成功");
    },

    // 文件上传失败
    handleError(err, file, fileList) {
      this.$message.error("文件上传失败");
    },

    // 覆盖默认的上传行为，自定义上传的实现
    uploadFile() {
      if (this.fileList.length === 0) {
        this.$message.warning("请上传文件");
      } else {
        const data = new FormData();
        const fileUps = file.file;
        data.append("file", fileUps);
        this.$axios({
          headers: {
            "Content-Type": "multipart/form-data",
          },
          url: "/user/batch",
          data: data,
          method: "post",
        }).then(
          (res) => {
            console.log(res);
          },
          (err) => {
            console.log(err);
          }
        );
      }
    },
  },
  watch:{
    'idList':{
      handler:function(newVal, oldVal){
        console.log('批量上传发生啦');
        this.$emit('fileUpload',newVal)   // 传递给父元素最新的数据
      }
    },
    deep: true, //对象内部的属性监听，也叫深度监听
  }
};
</script>

<style scoped>
.upload-demo {
  display: flex;
}
.uploadBox {
  width: 90%;
  justify-content: space-between;
}
</style>