Vue导入excel文件的两种方式(form表单和el-upload)

如果要在Vue中实现导入Excel文件的功能，通常有两种方式：通过form表单提交和使用el-upload组件。下面对这两种方式进行详细介绍。

使用form表单提交

使用form表单提交的方式相对简单，需要在页面中添加一个input元素，并且指定type为“file”。在用户进行选择文件上传操作时，会触发input元素的change事件回调函数，然后在回调函数中通过FileReader实现文件读取和解析Excel文件的操作。

代码示例：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input type="file" ref="fileInput" @change="handleFileChange">
      <button type="submit">上传</button>
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fileList: []
      }
    },
    methods: {
      handleFileChange(event) {
        const files = event.target.files
        if (files.length) {
          const file = files[0]
          const reader = new FileReader()
          reader.onload = () => {
            const data = reader.result
            // 处理Excel文件数据
          }
          reader.readAsBinaryString(file)
        }
      },
      handleSubmit() {
        // 处理表单提交的代码
      }
    }
  }
</script>

使用el-upload组件

使用el-upload组件的方式相对更加推荐，可以通过配置组件的action和方法来实现文件上传和解析Excel文件的操作。需要注意的是，在使用el-upload组件时，需要对组件进行设置，例如设置accept属性为“.xlsx”、“.xls”或“application/vnd.ms-excel”等，指定只允许上传Excel文件格式。

代码示例：

<template>
  <div>
    <el-upload
      ref="uploadImg"
      class="upload-demo"
      action="#"
      :auto-upload="false"
      :on-change="handleFileChange"
      :file-list="fileList"
      :accept="'.xls,.xlsx,application/vnd.ms-excel'"
    >
      <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
      <el-button size="small" type="success" @click="handleUpload">上传到服务器</el-button>
    </el-upload>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fileList: []
      }
    },
    methods: {
      handleFileChange(file) {
        this.fileList.push(file)
        const reader = new FileReader()
        reader.onload = () => {
          const data = reader.result
          // 处理Excel文件数据
        }
        reader.readAsBinaryString(file.raw)
      },
      handleUpload() {
        // 处理上传文件到服务器的代码
      }
    }
  }
</script>

以上就是使用form表单和el-upload组件两种方式实现Vue导入Excel文件的方法，具体选择哪种方式取决于个人的需求和习惯。需要注意的是，上传文件到服务器时，需要在服务器端对文件进行验证和解析处理，避免出现文件格式错误等问题。