vue用el-upload上传excel文件并预览

使用Element UI的el-upload组件上传Excel文件并预览可以分为以下几个步骤：

1. 安装Element UI和xlsx依赖。在命令行中执行以下命令：

npm install element-ui xlsx --save

2. 在Vue组件中引入Element UI和xlsx。例如：

import { ElUpload, ElButton } from 'element-ui';
import XLSX from 'xlsx';

3. 在Vue组件中使用el-upload组件创建文件上传并预览的功能。例如：

<template>
  <el-upload
    class="upload-demo"
    action=""
    :on-change="handleFileUpload"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :auto-upload="false"
    :accept=".xlsx, .xls"
    :show-file-list="false">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
  </el-upload>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="(value, key) in row" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

4. 在Vue组件中定义beforeUpload方法，用于限制只能上传Excel文件。例如：

beforeUpload(file) {
  const fileType = file.name.split('.').pop();
  if (fileType !== 'xlsx' && fileType !== 'xls') {
    this.$message.error('只能上传Excel文件');
    return false;
  }
}

5. 在Vue组件中定义handleFileUpload方法，用于处理上传的Excel文件。例如：

handleFileUpload(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    const data = e.target.result;
    const workbook = XLSX.read(data, { type: 'binary' });
    const sheetName = workbook.SheetNames[0];
    const sheet = workbook.Sheets[sheetName];
    const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
    this.headers = jsonData[0];
    this.data = jsonData.slice(1);
  };
  reader.readAsBinaryString(file.raw);
}

6. 在Vue组件中定义fileList、headers和data变量，用于存储上传的Excel文件信息和解析后的数据。例如：

data() {
  return {
    fileList: [],
    headers: [],
    data: []
  };
}

7. 根据需要自定义样式和其他功能。例如：

.upload-demo {
  margin-top: 20px;
  width: 100%;
}