React+Axios上传文件至Flask后端失败，Postman正常请求排查

你遇到的问题是Axios请求格式错误，导致Flask后端无法解析到上传的文件，具体错误点和修复方案如下：

核心错误点 #

1. Axios请求参数格式错误：你将FormData包裹在{data: formData}对象中发送，这会让Axios把请求体序列化为JSON格式，而非后端期望的multipart/form-data表单数据。
2. 手动设置Content-Type导致问题：手动指定'Content-type': 'multipart/form-data'会丢失自动生成的boundary分隔符，Flask无法正确解析表单数据。
3. 按钮事件绑定错误：按钮点击时触发handleFileChange，但按钮元素没有files属性，会导致file变量为undefined。

修复后的前端代码 #

1. 调整JSX结构（分离文件选择和提交逻辑） #

<div>
    <label htmlFor="file" style={{marginBottom:'0.5rem', display:'block'}}>
        Upload Resume
    </label>
    <input
        className={styles.inputstyle}
        type="file"
        name="file"
        onChange={handleFileChange}
        style={{ marginBottom: '0.5rem' }}
    />
    <button onClick={handleSubmit}>send</button>
</div>

2. 修正事件处理函数 #

import { useState } from 'react';
import axios from 'axios';

// 用状态保存选中的文件
const [selectedFile, setSelectedFile] = useState(null);

// 处理文件选择
const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0]);
};

// 处理提交请求
const handleSubmit = () => {
    if (!selectedFile) return; // 无文件时不发送请求

    const formData = new FormData();
    formData.append('file', selectedFile);

    // 直接传入FormData，无需包裹对象，也不用手动设置Content-Type
    axios.post('http://127.0.0.1:8000/user-file', formData)
        .then((response) => {
            console.log(response.data);
        })
        .catch((error) => {
            console.error('请求失败:', error);
        });
};

补充说明 #

• Axios在接收FormData作为请求体时，会自动设置正确的Content-Type: multipart/form-data; boundary=xxx，无需手动配置。
• 后端代码中request.files['file']的写法是正确的（Postman能正常工作也验证了这一点），如果后续遇到文件内容读取问题，可以检查extract_text函数是否正确处理上传的文件对象（而非仅依赖文件名）。

内容的提问来源于stack exchange，提问作者El Pandario