如何在Flutter中通过HTTP POST请求发送复杂嵌套JSON格式请求体

问题排查 #

你遇到的500错误核心是缺少将Dart模型类序列化为JSON的toJson方法，同时现有逻辑存在两处易导致解析失败的问题：

• 问题1：你的模型类只实现了fromJson（用于服务端返回JSON转Dart对象），但发送POST请求需要把Dart对象转成服务端可识别的JSON格式，必须实现对应的toJson方法
• 问题2：PostUpload_Request的fromJson方法中直接给images赋值parsedJson['images']，这是List<dynamic>类型，不能直接赋值给List<Image>类型，需要遍历转换为Image类实例
• 问题3：发送请求时如果没有设置Content-Type: application/json请求头，或者没有把Map转成JSON字符串，也会导致服务端解析失败返回500

修复后的模型类代码 #

class PostUploadRequest {
  final String? title;
  final String? description;
  final List<ImageItem>? images; // 建议改名避免和Flutter自带的Image类冲突

  PostUploadRequest({this.title, this.description, this.images});

  // 修复fromJson的images类型转换问题
  factory PostUploadRequest.fromJson(Map<String, dynamic> parsedJson) {
    var imagesList = parsedJson['images'] as List;
    List<ImageItem> items = imagesList.map((i) => ImageItem.fromJson(i)).toList();
    return PostUploadRequest(
      title: parsedJson['title'],
      description: parsedJson['description'],
      images: items,
    );
  }

  // 新增toJson方法，用于序列化Dart对象为JSON格式
  Map<String, dynamic> toJson() {
    return {
      'title': title,
      'description': description,
      // 调用List中每个ImageItem的toJson方法完成嵌套序列化
      'images': images?.map((e) => e.toJson()).toList(),
    };
  }
}

// 改名为ImageItem，避免和Flutter SDK自带的Image组件类重名冲突
class ImageItem {
  ImageItem({required this.image});

  final String? image;

  factory ImageItem.fromJson(Map<String, dynamic> parsedJson) {
    return ImageItem(
      image: parsedJson['image'],
    );
  }

  // 新增toJson方法
  Map<String, dynamic> toJson() {
    return {
      'image': image,
    };
  }
}

正确发送POST请求示例 #

import 'dart:convert';
import 'package:http/http.dart' as http;

void uploadPost() async {
  // 1. 构造请求参数对象
  final requestData = PostUploadRequest(
    title: "this is my test title",
    description: "this is my test description",
    images: [
      ImageItem(image: "替换为你的base64图片字符串"),
    ],
  );

  // 2. 设置请求头，声明发送的是JSON格式
  final headers = {
    'Content-Type': 'application/json',
  };

  // 3. 把Dart对象转成JSON字符串
  final body = jsonEncode(requestData.toJson());

  // 4. 发送请求
  final response = await http.post(
    Uri.parse("替换为你的服务端接口地址"),
    headers: headers,
    body: body,
  );

  // 可打印返回结果排查后续问题
  print('响应状态码: ${response.statusCode}');
  print('响应内容: ${response.body}');
}

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