React向Flask服务器上传图片报415错误的解决方法

问题根源 #

两个核心错误导致了415报错：

1. React端手动设置了multipart/form-data请求头，丢失了FormData自动生成的boundary标识，Flask无法正确解析请求内容
2. Flask端错误地用request.json获取multipart请求里的文本字段，应该用request.form

具体修复步骤 #

1. 修正React请求代码 #

移除fetch中手动设置的content-type头，让浏览器自动生成包含boundary的正确请求头：

修改后的handleSubmit中fetch部分：

fetch("/addProduct", {
  method: "POST",
  // 删掉手动设置content-type的行
  body: postData,
})

2. 修正Flask后端代码 #

• 用request.form获取文本字段，而非request.json
• 安全处理文件上传逻辑，避免文件不存在时的报错
• 修复数据库路径的转义问题

修改后的add_product函数：

@app.route('/addProduct', methods=['POST'])
def add_product():
    # 从form中获取文本参数
    name = request.form["name"]
    ingredients = request.form["ingredients"]
    price = request.form["price"]
    food_drink = request.form["food_drink"]
    
    # 安全获取上传文件
    file_img = request.files.get("image")
    image_path = None
    if file_img and file_img.filename.strip() != "":
        filename = secure_filename(file_img.filename)
        image_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file_img.save(image_path)
    
    # 用正斜杠避免路径转义问题
    db = sqlite3.connect('flask-server/db/main_db.db')
    sql = db.cursor()
    sql.execute(
        "INSERT INTO products (name, ingredients, price, food_drink, image) VALUES (?, ?, ?, ?, ?)",
        (name, ingredients, price, food_drink, image_path)
    )
    db.commit()
    db.close()
    return jsonify({"message": "200"})

额外注意事项 #

• 确保服务器上的uploads文件夹有写入权限，否则文件无法保存
• 可添加文件类型校验，比如限制只允许jpg/png等图片格式，增强安全性：

  ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
  def allowed_file(filename):
      return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
  

  在保存文件前调用allowed_file(filename)进行校验

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