使用Flutter Dio提交含图片与字符串混合对象数组的JSON数据求助

核心实现逻辑 #

Dio的FormData支持带索引的嵌套字段命名规则，可直接实现数组内每个对象同时包含字符串字段和文件字段的提交需求，无需额外第三方依赖。

实现步骤 #

• 引入dio: ^5.0+版本依赖
• 构建FormData对象，先添加所有普通顶层字段
• 遍历img_list数组，按img_list[索引][字段名]的命名格式，分别添加字符串类型的alt字段、文件类型的photo字段
• 直接将FormData作为请求data参数发送即可

完整示例代码 #

import 'package:dio/dio.dart';

Future<void> submitForm() async {
  final dio = Dio();
  final formData = FormData.fromMap({
    // 普通顶层字段直接赋值
    "offer_price": 20.0,
    "is_offer": false,
  });

  // 你的图片数组数据
  final imgList = [
    {
      "alt": "ss_bg1.png",
      "file_path": "/storage/emulated/0/Pictures/ss_bg1.png" // 本地图片路径
    },
    {
      "alt": "ss_bg2.png",
      "file_path": "/storage/emulated/0/Pictures/ss_bg2.png"
    }
  ];

  // 遍历数组添加混合字段
  for (int i = 0; i < imgList.length; i++) {
    final imgItem = imgList[i];
    // 添加字符串字段
    formData.fields.add(MapEntry(
      "img_list[$i][alt]",
      imgItem["alt"] as String,
    ));
    // 添加文件字段
    formData.files.add(MapEntry(
      "img_list[$i][photo]",
      await MultipartFile.fromFile(
        imgItem["file_path"] as String,
        filename: imgItem["alt"],
      ),
    ));
  }

  // 发送请求
  try {
    final resp = await dio.post(
      "你的后端接口地址",
      data: formData,
      options: Options(
        contentType: Headers.multipartFormDataContentType,
      ),
    );
    // 处理响应逻辑
    print("提交成功：${resp.data}");
  } on DioException catch (e) {
    // 处理错误逻辑
    print("提交失败：${e.response?.data ?? e.message}");
  }
}

兼容方案（后端不支持嵌套multipart时使用） #

如果后端无法解析带索引的嵌套multipart字段，可调整提交格式：

将所有非文件参数（包含img_list里的alt等字符串属性）序列化为JSON字符串，作为payload普通字段提交；所有图片文件单独作为photo_0、photo_1这类带索引的字段提交，后端收到后按索引关联payload里的img_list对应项即可。

注意事项 #

• 你给出的示例JSON中存在重复的offer_price字段，实际开发时需删除重复字段避免参数被覆盖。
• 如果photo字段是已经上传到服务器的远程URL而非本地文件，不需要走multipart格式，直接将整个结构序列化为JSON作为普通请求体提交即可。

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