Flutter使用ImagePicker多图上传触发类型转换异常求助

问题总结 #

使用Flutter的ImagePicker从相机获取图片后，真机上单张图片上传HTTP Post请求成功，但上传两张及以上图片时抛出异常：
Unhandled Exception: type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'String'
模拟器无此问题。

核心原因 #

该异常由类型不匹配导致，大概率是以下两种场景之一：

1. 后端返回的响应中，Message字段在多张上传时为Map类型，客户端代码直接将其作为String传递给showStatus函数；
2. 构建请求的JSON数据时，Images数组中某张图片的Value字段（Base64图片数据）不是String类型，而是Map（比如图片转换出错返回的错误信息Map）。

解决方案 #

方案1：处理后端响应的类型不匹配 #

多张图片上传时，后端可能返回非字符串类型的Message（比如包含详细错误的Map），需先转为字符串再使用：

• 直接转换写法：

  // 原代码
  showStatus(res['Message'], Colors.green);
  // 修改后
  showStatus(res['Message'].toString(), Colors.green);
  

• 安全类型判断写法：

  dynamic responseMsg = res['Message'];
  String displayMsg = responseMsg is String ? responseMsg : responseMsg.toString();
  showStatus(displayMsg, Colors.green);
  

方案2：确保请求中Base64图片数据为String类型 #

检查多张图片转Base64的过程，确保每一张的结果都是字符串：

1. 图片转Base64的正确实现：

   List<Map<String, dynamic>> imagesList = [];
   for (XFile image in selectedImages) {
     final bytes = await image.readAsBytes();
     String base64Str = base64Encode(bytes);
     imagesList.add({
       "Name": image.name,
       "Size": (image.lengthSync() / 1024).toStringAsFixed(1), // 转为带1位小数的KB值
       "Value": base64Str
     });
   }
   

2. 构建请求前验证类型：

   for (var img in imagesList) {
     print("Base64类型: ${img['Value'].runtimeType}");
   }
   

方案3：完善请求JSON的类型合法性 #

• 确保Images数组中Name字段是字符串（示例代码中AYHS78.jpg未加引号，实际代码需改为"AYHS78.jpg"）；
• 检查sourceOfSizes、latitude、longitude等字段类型，确保符合后端接口要求（比如Size字段如果后端期望是String，需将数字转为字符串）。

方案4：增强响应解析的类型安全性 #

将响应解析的类型声明为Map<String, dynamic>，避免隐式类型转换问题：

// 原代码
Map res = jsonDecode(response.body);
// 修改后
Map<String, dynamic> res = jsonDecode(response.body);

整合后的关键代码示例 #

// 构建合法的图片列表
List<Map<String, dynamic>> imagesList = [];
for (XFile image in selectedImages) {
  final bytes = await image.readAsBytes();
  String base64Str = base64Encode(bytes);
  imagesList.add({
    "Name": image.name,
    "Size": (image.lengthSync() / 1024).toStringAsFixed(1),
    "Value": base64Str
  });
}

// 构建请求JSON
var json = {
  "AccessToken": "2A9LOSJJMSJDUUDND907782",
  "ClientNo": clientNo1,
  "uID": uID1,
  "logID": logID,
  "vID": vIDpss,
  "PTID": pIDpass,
  "Name": propertyNameController.text,
  "Size": sourceOfSizes.toString(), // 确保为字符串类型
  "PlotStatus": 'Available',
  "UseFor": 'Sales',
  "GrossSize": grossSizeController.text.isNotEmpty ? grossSizeController.text : null,
  "Description": descriptionController.text.isNotEmpty ? descriptionController.text : null,
  "Amount": rentAmountController.text,
  "Lat": latitude.toString(), // 确保为字符串类型（若后端要求）
  "Log": longitude.toString(), // 确保为字符串类型（若后端要求）
  "Address": addressController.text.isNotEmpty ? addressController.text : null,
  "Images": imagesList
};

// 处理响应
Map<String, dynamic> res = jsonDecode(response.body);
dynamic responseMsg = res['Message'];
String displayMsg = responseMsg is String ? responseMsg : responseMsg.toString();

if (res['Code'] == 200) {
  showStatus(displayMsg, Colors.green);
  Navigator.of(context).pushAndRemoveUntil(
    MaterialPageRoute(builder: (BuildContext context) => const ActivePage()),
    (Route<dynamic> route) => false);
  setState(() => isLoading = false);
} else {
  showStatus(displayMsg, Colors.red);
  setState(() => isLoading = false);
}

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