【vue文件上传+示例代码】【for循环展示el-teble表格】

<template>
  <el-row justify="space-between">

    <input type="file" id="fileInput"/>

    <el-button type="success" @click="doSumbitFile">上传</el-button>
  </el-row>

<!-- 此次错误原因：没搞清楚label和prop的数据格式，显示方式。 -->
<!-- label应该是标签，prop是列表字典中的键（属性名） -->
  <el-table :data="state.tableData" border>
    <el-table-column :label="Object.keys(item)[index]"
                     :prop="Object.keys(item)[index]"
                     v-for="(item, index) in state.tableData"></el-table-column>
  </el-table>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {userInfoStore} from "@/stores/counter.js";
import * as XLSX from "xlsx";

const upload = ref()
const store = userInfoStore()
const state = reactive({
  tableData: [],
  uploadUrl: 'http://localhost:8000/api/employ/upload/',
  form: {}
})


onMounted(
    function () {
      document.getElementById('fileInput').addEventListener('change', function () {
        const fileObj = this.files[0]
        // console.log(fileObj)

        // FileReader对象就是专门操作二进制数据的，主要用于将文件内容读入内存
        const fileReader = new FileReader()

        // readAsArrayBuffer，读取指定的 Blob或File内容
        fileReader.readAsArrayBuffer(fileObj)

        // 添加事件
        fileReader.onload = (event) => {

          // 是二进制文件
          const fileData = event.target.result

          // XLSX读取该二进制文件，获得工作簿
          const workbook = XLSX.read(fileData, {type: 'binary'})

          // 获取第一张表名称
          const sheetName = workbook.SheetNames[0]

          // 获取工作表
          const sheet = workbook.Sheets[sheetName];

          // 获取json
          const sheetData = XLSX.utils.sheet_to_json(sheet)

          state.tableData = sheetData

          console.log(sheetData)

        }
      })
    }
)

function doSumbitFile() {

}

</script>

<style scoped>

</style>