React函数式组件用Fetch传文件到Flask，后端无法获取怎么办？

问题核心在于React端没有以正确的格式传递文件数据，导致Flask无法识别。以下是具体修改方案：

React组件修改 #

原代码中直接传递ev.target.inputFile.value仅能获取文件名，而非实际文件对象，且未使用文件上传标准的FormData格式。修改后的代码如下：

export function UploadComponent() {
  const onSubmit = async (ev) => {
    ev.preventDefault();
    // 获取选中的文件对象
    const file = ev.target.inputFile.files[0];
    if (!file) {
      console.log("请先选择文件");
      return;
    }

    // 用FormData封装文件，这是浏览器处理文件上传的标准方式
    const formData = new FormData();
    formData.append('inputFile', file);

    const response = await fetch("/api/upload", {
      method: 'POST',
      body: formData // fetch会自动为FormData设置正确的Content-Type请求头
    });

    if (response.ok) {
      const resData = await response.json();
      console.log("文件上传成功:", resData.message);
    } else {
      console.log("文件上传失败");
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <input id="inputFile" type="file" />
      <button type="submit">Submit</button>
    </form>
  );
}

Flask路由优化 #

原代码逻辑基本可行，但可以增加错误判断，让代码更健壮：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/upload', methods=['POST'])
def upload():
    # 检查请求中是否包含文件
    if 'inputFile' not in request.files:
        return jsonify({"message": "未接收到文件"}), 400
    
    file = request.files['inputFile']
    # 检查是否选中了有效文件
    if file.filename == '':
        return jsonify({"message": "未选择文件"}), 400
    
    # 此处添加文件处理逻辑，例如保存到服务器
    # file.save(f"./uploads/{file.filename}")
    
    return jsonify({"message": "文件接收成功"})

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

关键说明 #

• 必须使用FormData封装文件：这是浏览器支持的文件上传标准格式，会自动生成multipart/form-data类型的请求头，Flask的request.files仅能识别该格式的文件数据。
• 正确获取文件对象：通过input.files[0]获取用户选中的文件，而非input.value（后者仅返回文件名）。
• Flask端增加前置校验：避免因无文件或空文件导致的异常。

内容的提问来源于stack exchange，提问作者Pink Flying Elephant