Flutter使用Dio/Http上传多图时报错Cannot read property '0' of undefined

核心问题分析 #

服务端返回的Cannot read property '0' of undefined错误，明确说明服务端代码中尝试读取图片数组的第0位元素时，对应的图片数组参数不存在、未被赋值。结合业务场景，问题基本出在文件参数名的格式不符合服务端实际解析规则：
你当前使用的参数名格式为images_0、images_1，但主流服务端框架（Node.js/Java Spring/PHP等）默认接收数组类型多文件的参数名格式为images[0]、images[1]，服务端会自动将这类格式的参数合并为images数组处理，找不到该数组就会触发你遇到的报错。

修复方案 #

1. 优先修改参数名格式（90%概率可以解决问题） #

直接将MultipartFile的第一个参数从images_$imgNum修改为images[$imgNum]即可，修改后的代码如下：

import 'package:http_parser/http_parser.dart'; // 导入该包可设置媒体类型

// ... 其他逻辑
int imgNum = 0;
for (int i = 0; i < data.images.length; i++) {
  if (data.images[i] != null) {
    File file = File(data.images[i]!.path);     
    String fileName = file.path.split('/').last;

    http.MultipartFile mFile = http.MultipartFile(
      'images[$imgNum]', // 修改参数名格式为方括号包裹序号
      file.readAsBytes().asStream(), 
      await file.length(),        
      filename: fileName,
      // 可选添加：部分严格校验的服务端要求正确的图片媒体类型
      contentType: MediaType('image', fileName.split('.').last.toLowerCase() == 'png' ? 'png' : 'jpeg'),
    );
    imgNum++;
    request.files.add(mFile);
  }
}

如果用Dio实现，修改逻辑一致，设置FormData的文件key为images[$i]即可。

2. 若确认接口要求必须使用images_0格式的参数名 #

额外添加一个文件计数的普通参数，告诉服务端本次上传的图片总数，服务端会根据该数值循环读取对应序号的图片参数：

// 其他参数添加文件计数
request.fields['imageCount'] = imgNum.toString();

验证建议 #

你可以本地抓包对比自己发出的请求和网页端正常请求的参数名差异，能快速确认参数格式是否匹配。

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