vue中upload上传excel文件http-request

在 Vue 中使用 Upload 组件上传 Excel 文件并发送 http 请求的步骤如下：

1. 在 Vue 组件中引入 Upload 组件：

<template>
  <el-upload
    class="upload-excel"
    action="/api/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :accept=".xlsx, .xls"
    :auto-upload="false"
  >
    <el-button slot="trigger" size="small" type="primary">上传 Excel 文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传 .xlsx 或 .xls 格式的文件</div>
  </el-upload>
</template>

2. 在 Vue 组件的 `methods` 中定义 `handleSuccess` 和 `beforeUpload` 方法：

methods: {
  handleSuccess(response, file, fileList) {
    // 上传成功后的处理逻辑
  },
  beforeUpload(file) {
    // 上传前的校验逻辑，如文件大小、文件类型等
  }
}

3. 在 `handleSuccess` 方法中发送 http 请求：

methods: {
  handleSuccess(response, file, fileList) {
    // 发送 http 请求
    axios.post('/api/uploadExcel', { file: file }).then(res => {
      // 处理 http 请求返回的数据
    }).catch(err => {
      // 处理请求错误
    })
  },
  beforeUpload(file) {
    // 上传前的校验逻辑，如文件大小、文件类型等
  }
}

4. 在后台编写对应的接口处理上传的 Excel 文件。可以使用如下示例代码解析上传的 Excel 文件：

import pandas as pd

def handle_upload_excel(request):
    file = request.files['file']
    df = pd.read_excel(file)
    # 处理解析后的数据

    return jsonify({'code': 0, 'message': '上传成功'})

需要注意的是，在后台接收到上传的文件后，需要对其进行处理并返回相应的结果。以上就是在 Vue 中使用 Upload 组件上传 Excel 文件并发送 http 请求的基本流程。