vue2前端文件上传excel

在Vue 2前端进行文件上传，尤其是Excel文件，通常可以使用一些第三方库来简化操作。一个常用的库是`element-ui`，它内置了文件上传组件`el-upload`，同时提供了一些处理Excel文件的功能。

首先，你需要安装所需的依赖，例如：

npm install element-ui axios file-type-excel --save

然后，在你的组件中导入并配置`el-upload`以及相关的工具库：

<template>
  <el-upload
    :action="uploadUrl"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    ref="upload"
  >
    <i class="el-icon-upload"></i> <span>点击上传</span>
  </el-upload>
</template>

<script>
import axios from 'axios';
import {FileTypeExcel} from 'file-type-excel';

export default {
  data() {
    return {
      uploadUrl: '', // 你的API上传地址
    };
  },
  methods: {
    beforeUpload(file) {
      if (!FileTypeExcel.is(file)) {
        this.$message.error('只支持Excel文件上传！');
        return false;
      }
      const size = file.size / (1024 * 1024); // 检查文件大小，防止过大
      if (size > 5) {
        this.$message.warning('文件大小不能超过5MB');
        return false;
      }
      return true;
    },
    handleSuccess(response, file) {
      console.log('文件上传成功', response);
      // 在这里处理服务器返回的数据
    },
  },
};
</script>

在这个例子中：
- `beforeUpload`钩子用于检查文件是否是Excel格式及文件大小。
- `handleSuccess`方法会在文件上传成功后调用，你可以在这里处理服务器响应并可能更新状态等。