Axios POST提交图片数组时返回500错误的问题咨询

核心问题根因 #

• 路由不匹配：前端请求路径为/api/upload-home-picture/${id}携带路径参数，后端定义的路由/upload-home-picture没有配置对应路径参数占位符，且后端逻辑中没有读取路径参数的代码
• 参数名不匹配：前端提交的JSON数据字段为file、position，后端直接读取不存在的home字段，会直接抛出KeyError导致500
• 请求头配置错误：使用axios提交FormData时无需手动设置Content-Type: multipart/form-data，手动配置会丢失浏览器自动生成的boundary分隔符，导致后端无法正常解析表单数据，这也是你请求payload不完整的直接原因
• 上传逻辑缺失：后端_upload_file()方法没有接收前端传入的base64图片数据，要么方法执行报错，要么生成的文件内容为空
• 位置参数逻辑不一致：前端传入position值为1，后端写死存储pos=0，会导致业务逻辑不符

修复代码示例 #

前端修复 #

ChangeImages(images) {
  this.images = images;
  const formData = new FormData();
  // 字段和后端对齐，补充home字段
  formData.append(
    "data",
    JSON.stringify({ 
      file: this.images[0], 
      position: 1,
      home: this.homeId // 补充后端需要的home字段
    })
  );
  // 移除手动设置的Content-Type，由浏览器自动生成
  axios
    .post(`/api/upload-home-picture`, formData)
    .then((response) => {
      this.home.images.push(response.data); // 原逻辑数组嵌套也有问题，可按实际业务调整
    })
    .catch(err => console.error(err)); // 增加异常捕获方便后续排查
},

后端修复 #

import base64
from io import BytesIO

@bp.route('/upload-home-picture', methods=['POST'])
@login_required
def upload_home_picture():
    try:
        data = json.loads(request.form['data'])
        home_id = data['home']
        position = data['position']
        # 校验home是否存在，避免查询为空后续报错
        home = UserHome.query.get(home_id)
        if not home:
            return jsonify({"error": "房屋不存在"}), 400
        # 处理base64图片
        base64_img = data['file']
        # 去掉base64标识前缀
        header, encoded = base64_img.split(',', 1)
        img_data = base64.b64decode(encoded)
        # 把解码后的文件流传给上传方法，_upload_file可根据实际逻辑调整入参
        url = _upload_file(BytesIO(img_data), file_type='png')
        db.session.add(UserHomeImage(url=url, home=home, pos=position))
        db.session.commit()
        return jsonify(dict(url=url, pos=position))
    except KeyError as e:
        return jsonify({"error": f"缺少必填参数{e}"}), 400
    except Exception as e:
        db.session.rollback()
        return jsonify({"error": "上传失败"}), 500

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