Vue3+elemetui plus 手动上传excel

Vue3结合Element Plus手动上传Excel文件通常涉及到以下步骤：

1. 首先，确保你的项目中已经安装并引入了Element Plus组件库，以及需要的文件处理库，如`xlsx`或`file-saver`。

2. 在你的Vue组件中，你需要创建一个表单输入，用于选择文件，如下所示：

<template>
  <el-form ref="uploadForm" :model="uploadForm" label-width="120px">
    <el-form-item label="选择文件">
      <el-upload
        class="upload-demo"
        action="#"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="beforeUpload"
      >
        <el-button size="small" type="primary">选取文件</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

3. 在`<script>`部分定义相应的数据和方法：

<script setup>
import { ref } from 'vue';

const uploadForm = ref({});

const beforeUpload = (file) => {
  // 可以在这里添加对文件类型、大小等的校验
  return true;
};

const handleSuccess = (response, file, fileList) => {
  // 文件上传成功后的回调函数
  console.log('上传成功', response, file);
};

const handleError = (err, file, fileList) => {
  // 文件上传失败后的回调函数
  console.error('上传失败', err);
};

// 读取并处理Excel文件
const handleFileRead = (file) => {
  const reader = new FileReader();
  reader.readAsBinaryString(file);
  reader.onload = (e) => {
    const data = e.target.result;
    // 使用xlsx库处理读取的数据
    const workbook = XLSX.read(data, {type: 'binary'});
    // 进一步处理workbook...
  };
};

// 监听文件上传组件的变化，手动触发文件读取
const handleUploadChange = (fileList) => {
  if (fileList.length > 0) {
    const file = fileList[0].raw;
    handleFileRead(file);
  }
};
</script>

4. 使用`<script setup>`中的`handleUploadChange`方法监听上传组件的变化，并在文件被选中后手动触发读取操作。

5. 使用`xlsx`库解析Excel文件内容，并根据需要进行进一步的处理。