使用vue的element组件上传excel文件

在Vue中使用Element UI的<el-upload>组件来上传Excel文件，可以按照以下步骤实现：

1. 安装Element UI库（如果尚未安装）：

npm install element-ui --save

2. 在Vue组件中引入Element UI及其样式：

import Vue from 'vue'
import { Upload } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(Upload)

3. 使用<el-upload>组件来上传Excel文件，并设置相应的属性：

<template>
  <el-upload
    action="https://your-upload-api"
    :on-success="handleSuccess"
    :on-error="handleError"
    accept=".xlsx, .xls">
    <el-button slot="trigger" size="small" type="primary">选择Excel文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('File uploaded successfully:', response);
    },
    handleError(err, file, fileList) {
      console.error('Error uploading file:', err);
    },
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
}
</script>

在这个例子中，action属性是你的文件上传API的URL。:on-success和:on-error是上传成功或失败时的回调函数，分别用于处理响应和错误。<el-button>用于触发文件选择，而另一个按钮用于显式提交上传。

确保后端API能够处理上传的Excel文件，并且在上传时，设置正确的Content-Type（通常是multipart/form-data）和接受的文件类型（这里是.xlsx和.xls）。