React前端上传音频至Flask后端，后端无法接收文件问题排查

问题现象 #

React前端上传音频文件到Flask后端，前端控制台显示“File has been uploaded”，但后端返回{"status": "error", "message": "No audio file received"}错误。

代码示例 #

React前端代码 #

import React ,{ ChangeEvent, useState } from "react"

const FileUpload: React.FC = () => {
    const [selectedFile, setFile] = useState<File| null>(null);
    

    const HandleAudioChange = (event:ChangeEvent<HTMLInputElement>) => {
        const file: File | null = event.target.files?.[0] || null;
        setFile(file)
        // console.log("Selected file", file)
    }

    const UploadAudio = () => {
        if(selectedFile){
            const formData : FormData = new FormData();
            formData.append('file',selectedFile)

            fetch('http://127.0.0.1:5000/upload', {
            method:'POST',
            body:formData,
        }).then(res => res.json())
        .then(data => {
            console.log("Server response", data)
        })
        .catch(error => {
            console.error("This is the error ", error);
        })
        .finally(() => {
            console.log("File has been uploaded")
        })
        }
    }
    

  return (
    <div className="flex justify-center mx-auto">
    <input className="rounded-full bg-white bg-opacity-70 text-xs text-blue-600 uppercase font-SF sm:px-3 font-semibold hover:shadow-md  sm:py-3 mx-auto" type="file" accept="audio/*" onChange={HandleAudioChange} />
    <button  onClick={UploadAudio}>
        上传音频
    </button>
    </div>
  )
}

export default FileUpload

Flask后端代码 #

from flask import Flask, request, jsonify
from flask_cors import CORS


app = Flask(__name__)
CORS(app)


@app.route("/upload", methods=["GET", "POST"])
def upload_audio():
    try:
        # 调试日志：打印请求内容类型和接收的文件
        print("Request content type:", request.content_type)
        print("All files received:", request.files)
        
        audio_file = request.files["file"]
        # 可选：保存文件到本地验证
        audio_file.save(f"./{audio_file.filename}")
        return jsonify({"status": "success", "message": "Audio received successfully"})
    except KeyError:
        return jsonify(
            {
                "status": "error",
                "message": "No audio file received",
            }
        )


if __name__ == "__main__":
    app.run(debug=True)

排查与解决方法 #

• 确保按钮可交互：原React代码中按钮无文本，用户可能无法正确触发上传操作，添加按钮文本如“上传音频”保证可点击。
• 验证文件选中状态：在UploadAudio函数开头添加console.log(selectedFile)，确认文件是否被正确捕获，排除状态未更新的问题。
• 后端调试确认请求：添加print语句查看请求的content_type是否为multipart/form-data; boundary=xxx，以及request.files是否包含file字段，定位是请求发送问题还是后端解析问题。
• CORS配置优化：如果跨域仍有问题，修改CORS配置为CORS(app, supports_credentials=True)，确保跨域请求数据完整传递。
• 确认FormData格式：使用FormData时无需手动设置Content-Type，浏览器会自动生成正确的请求头，手动设置反而会导致后端无法解析边界信息。

内容的提问来源于stack exchange，提问作者Abdullah Zulfiqar