vue上传excel文件到后端

1. 安装依赖

npm install xlsx file-saver -S

2. 创建上传组件

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileUpload">
  </div>
</template>

<script>
import XLSX from 'xlsx'
import { saveAs } from 'file-saver'

export default {
  methods: {
    handleFileUpload() {
      const files = this.$refs.fileInput.files
      const fileReader = new FileReader()
      fileReader.onload = e => {
        const data = e.target.result
        const workbook = XLSX.read(data, { type: 'binary' })
        const firstSheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[firstSheetName]
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        // 将 jsonData 发送到后端
        // 可以使用 axios、fetch 等库发送请求
      }
      fileReader.readAsBinaryString(files[0])
    }
  }
}
</script>

3. 后端接口处理

根据后端接口要求处理上传的 excel 数据，例如使用 `python` 处理：

import pandas as pd

# 读取上传的文件
df = pd.read_excel('filename.xlsx', engine='openpyxl')

# 处理数据
...

# 返回处理结果
...

注意：如果前端上传的文件比较大，可以考虑使用流式上传。