React上传CSV文件到Flask后端出现Axios 400错误求助

问题现象 #

尝试从React前端上传CSV文件到Flask后端，运行后Flask返回400错误（AxiosError），后端打印request.files输出ImmutableDict([])，完全未获取到上传数据。

错误信息 #

AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest}

前端代码（App.js） #

let handleSubmit = async (e) => {
    e.preventDefault()
    let file = csvFile
    const formData = new FormData()

    formData.append("file", file)

    axios
        .post("http://127.0.0.1:5000/reactTest", formData)
        .then((res) => console.log(res))
        .catch((err) => console.warn(err))

...

<input 
type='file'
value={csvFile}
name='csvFile'
/>
<button type='submit' onClick={handleSubmit}></button>

后端代码（api.py） #

@app.route('/reactTest', methods=['POST'])
def reactTest():
    if request.method == 'POST':
        # print(request.files)
        print(request.files['file'])
        return {'status': 200}

解决步骤 #

1. 修复React文件输入的文件获取逻辑 #

文件输入框的value属性无法直接绑定文件对象（文件输入的value为只读状态），必须通过onChange事件获取选中文件，同时用useState管理文件状态：

// 导入useState
import { useState } from 'react';

// 组件内初始化文件状态
const [csvFile, setCsvFile] = useState(null);

// 修改input元素
<input 
  type='file'
  name='csvFile'
  onChange={(e) => setCsvFile(e.target.files[0])}
  // 可选：绑定文件名避免React受控组件警告
  value={csvFile ? csvFile.name : undefined}
/>

2. 确保FormData正确添加文件 #

在提交前先判断文件是否存在，避免空文件传入：

let handleSubmit = async (e) => {
    e.preventDefault()
    if (!csvFile) {
        console.warn('请先选择文件');
        return;
    }
    const formData = new FormData()
    formData.append("file", csvFile)

    axios
        .post("http://127.0.0.1:5000/reactTest", formData)
        .then((res) => console.log(res))
        .catch((err) => console.warn(err))
}

3. 优化Flask后端的文件校验逻辑 #

直接访问request.files['file']会在文件不存在时抛出KeyError，导致400错误，需先做存在性校验：

@app.route('/reactTest', methods=['POST'])
def reactTest():
    if 'file' not in request.files:
        return {'status': 400, 'message': '未检测到上传文件'}, 400
    file = request.files['file']
    if file.filename == '':
        return {'status': 400, 'message': '请选择有效文件'}, 400
    # 可选：添加CSV文件类型校验
    if not file.filename.endswith('.csv'):
        return {'status': 400, 'message': '仅支持CSV文件上传'}, 400
    print(file)
    return {'status': 200}

4. 解决跨域问题 #

如果前端运行端口（如3000）和Flask后端端口（5000）不同，需配置CORS：

• 安装依赖：pip install flask-cors
• 修改后端代码：

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许所有跨域请求，生产环境可配置具体域名

@app.route('/reactTest', methods=['POST'])
def reactTest():
    # 校验逻辑同上

内容的提问来源于stack exchange，提问作者Harsh Jhunjhunwala