详解Vue ElementUI手动上传excel文件到服务器

下面是详解Vue ElementUI手动上传excel文件到服务器的完整攻略：

1. 前置条件

在进行该操作前，需要确保已经有Vue项目，并且已经安装了ElementUI组件库，同时服务器上已经搭建好了接收文件的API接口。

2. 准备工作

首先，在Vue组件中引入ElementUI组件库，并添加上传文件的组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadURL"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :auto-upload="false"
      :file-list="fileList"
      ref="upload"
      multiple>
      <el-button slot="trigger" type="primary">
        <i class="el-icon-upload"></i> 选择文件
      </el-button>
      <el-button
        type="success"
        @click.prevent="submitUpload"
        :disabled="!fileList.length">
        <i class="el-icon-upload2"></i> 上传到服务器
      </el-button>
      <div slot="tip" class="el-upload__tip">支持扩展名：xls、xlsx</div>
    </el-upload>
  </div>
</template>

其中，uploadURL是上传文件到服务器的API地址，handleChange是上传文件变化后的回调函数，beforeUpload是上传文件前进行的处理函数，fileList是上传的文件列表。

接下来，需要定义这些方法：

methods: {
  // 上传文件前的处理函数
  beforeUpload(file) {
    const isExcel = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].indexOf(file.type) > -1
    if (!isExcel) {
      this.$message.error('上传文件只能是 xls/xlsx 格式!')
      return false
    }
  },

  // 上传文件变化后的回调函数
  handleChange(file, fileList) {
    this.fileList = fileList.slice(-1)
  },

  // 手动触发上传
  submitUpload() {
    this.$refs.upload.submit()
  }
}

其中，beforeUpload函数用来校验文件类型是否为Excel文件，handleChange函数用来保证只上传最后一个文件，submitUpload函数用来手动触发上传。

至此，我们已经成功添加了文件上传组件，并能够手动上传Excel文件，但是还无法将文件上传到服务器。

3. 使用axios向服务器发送请求

在上传文件时，可以使用axios库向服务器发送请求。首先，在Vue项目中安装axios：

npm install axios

接下来，添加以下代码：

import axios from 'axios'

export default {
  name: 'FileUpload',
  data() {
    return {
      uploadURL: 'http://www.example.com/file/upload',
      fileList: []
    }
  },
  methods: {
    // 上传文件前的处理函数
    beforeUpload(file) {
      const isExcel = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].indexOf(file.type) > -1
      if (!isExcel) {
        this.$message.error('上传文件只能是 xls/xlsx 格式!')
        return false
      }
    },

    // 上传文件变化后的回调函数
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1)
    },

    // 手动触发上传
    submitUpload() {
      const formData = new FormData()
      formData.append('file', this.fileList[0].raw)
      axios({
        url: this.uploadURL,
        method: 'post',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        data: formData
      }).then(response => {
        this.$message.success('上传成功！')
      }).catch(error => {
        this.$message.error('上传失败！')
      })
    }
  }
}

其中，FormData对象用于上传文件，axios库用于向服务器发送请求，submitUpload函数中的代码将文件转换成FormData对象，同时指定请求方法和请求头，最后使用axios库发送请求。

4. 示例

以下是一个完整的示例，可以将Excel文件上传到服务器，并在成功上传后显示上传成功的提示。

<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadURL"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :auto-upload="false"
      :file-list="fileList"
      ref="upload"
      multiple>
      <el-button slot="trigger" type="primary">
        <i class="el-icon-upload"></i> 选择文件
      </el-button>
      <el-button
        type="success"
        @click.prevent="submitUpload"
        :disabled="!fileList.length">
        <i class="el-icon-upload2"></i> 上传到服务器
      </el-button>
      <div slot="tip" class="el-upload__tip">支持扩展名：xls、xlsx</div>
    </el-upload>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'FileUpload',
  data() {
    return {
      uploadURL: 'http://www.example.com/file/upload',
      fileList: []
    }
  },
  methods: {
    // 上传文件前的处理函数
    beforeUpload(file) {
      const isExcel = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].indexOf(file.type) > -1
      if (!isExcel) {
        this.$message.error('上传文件只能是 xls/xlsx 格式!')
        return false
      }
    },

    // 上传文件变化后的回调函数
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1)
    },

    // 手动触发上传
    submitUpload() {
      const formData = new FormData()
      formData.append('file', this.fileList[0].raw)
      axios({
        url: this.uploadURL,
        method: 'post',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        data: formData
      }).then(response => {
        this.$message.success('上传成功！')
      }).catch(error => {
        this.$message.error('上传失败！')
      })
    }
  }
}
</script>

希望这份攻略能够帮助你完成Vue ElementUI手动上传excel文件到服务器的操作。