React+Flask项目中Axios上传文件时Flask的Request.File为空

核心问题分析 #

你的代码存在两个关键错误，导致Flask端无法获取上传的文件：

1. Axios 请求数据结构错误：将 FormData 对象包裹在额外的 {data: filou} 对象中，后端无法正确解析文件内容。
2. 手动设置请求头导致边界符丢失：手动指定 multipart/form-data 头会覆盖Axios自动生成的boundary分隔符，Flask无法识别表单数据的结构。

修正后的前端代码 #

const handleUploadImage = async(ev) => {
    ev.preventDefault();

    const filou = new FormData();
    filou.append('file', img_obj);

    try {
      console.log(img_obj)

      const response = await axios({
        method: "POST",
        url:"http://127.0.0.1:5000/upload",
        // 移除手动设置的content-type，Axios会自动处理
        data: filou, // 直接传递FormData对象，无需额外包裹
      })
    }
    catch (err) {
      console.log(err);
    }
}

修正后的后端代码 #

移除错误的 request.form['data'] 访问语句，避免触发KeyError：

@app.route('/upload', methods=['POST'])
@cross_origin()
def fileUpload():
    print("hello")
    
    # 检查请求中是否包含文件部分
    if 'file' not in request.files:
        print("no file")
        flash('No file part')
        return "redirect(request.url)"
    file = request.files['file']
    
    # 用户未选择文件时，浏览器会提交空文件（无文件名）
    if file.filename == '':
        print("no selected file")
        flash('No selected file')
        return redirect(request.url)
    
    if file and allowed_file(file.filename):
        print("YYYYYYYYYYYYYYYYYYYEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEYYYY")
        filename = secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        return "redirect(url_for('download_file', name=filename))"
    
    ye = "yeet"
    
    return ye

修复原理 #

• 直接传递FormData对象给Axios的data参数，Axios会自动生成包含正确boundary的multipart/form-data请求头，确保Flask能正确解析表单中的文件。
• 移除错误的request.form['data']访问，因为前端不再传递该字段，避免不必要的报错。

内容的提问来源于stack exchange，提问作者Lyes Ye