vue3 用el-upload实现文件上传，限制只能上传一个文件并且只能是xlsx 解析用户上传的文件的第一个工作簿成对象数组

在 Vue3 中使用 Element Plus 的 `el-upload` 实现文件上传，并且指定只允许上传单个 XLSX 文件，你可以这样做：

首先，在模板部分设置 `el-upload` 组件并添加限制：

<template>
  <el-upload
    :action="uploadUrl"
    :on-change="handleInputChange"
    :limit="1" <!-- 只允许一次上传 -->
    :accept="'.xlsx'"
    :before-upload="beforeUpload"
    ref="upload"
  >
    <i class="el-icon-plus"></i>
    <div slot="tip">点击上传 XLSX 文件</div>
  </el-upload>
</template>

然后在组件的 script 部分编写相关方法：

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';

// 定义文件上传的URL
const uploadUrl = ref('');
// 初始状态，用于存储上传过程中的文件信息
const fileInfo = ref(null);
// 上传前的回调函数
async function beforeUpload(file) {
  if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
    this.$message.error('仅支持XLSX格式');
    return false;
  }
  return true;
}

// 当用户选择文件后，更新fileInfo
function handleInputChange({ file }) {
  fileInfo.value = file;
}

// 上传文件到服务器
async function uploadFile() {
  try {
    const formData = new FormData();
    formData.append('file', fileInfo.value);

    const response = await axios.post(uploadUrl.value, formData);
    const workbook = response.data?.workbook; // 假设response包含解析后的第一个工作簿
    // 将工作簿转换为对象数组
    const objArray = convertWorkbookToArray(workbook); // 自定义的转换函数
    // 这里可以进一步操作objArray...
  } catch (error) {
    console.error('上传失败:', error);
  }
}

// 示例：假设你有解析XLSX的工作簿工具
async function convertWorkbookToArray(workbook: any): Promise<any[]> {
  const wsData = workbook.Sheets['Sheet1'] ?? {}; // 获取第一个工作表
  // 根据实际的XLSX内容进行解析，例如使用xlsx库
  // ...
  return parsedData; // 返回解析后的对象数组
}

onMounted(() => {
  // 初始化其他配置，如uploadUrl
});
</script>

这里我们先设置了文件接受类型为 `.xlsx`，然后在 `beforeUpload` 函数中验证文件类型。当用户选择文件后，我们通过 `handleInputChange` 更新文件信息，并在适当的时候调用 `uploadFile` 来发送请求并将返回的数据转换为数组。

注意：你需要安装`axios`作为HTTP客户端库（如果还没安装，可以运行`npm install axios`），并且可能需要引入`xlsx`或其他库来解析XLSX文件，具体的解析代码取决于库的具体用法。