Flutter如何向Rest API上传多张图片？现有代码无法正常上传求解决

现有代码核心问题 #

• 单图片循环发请求：每次循环新建一个请求实例，仅上传单张图片，若后端预期单请求接收多张图片则完全不匹配
• 表单字段命名错误：多图上传时字段名需添加数组标识，通常为picture[]而非单图的picture，需和后端规则对齐
• 同步读文件阻塞UI：使用readAsBytesSync同步读取图片字节，大文件会导致UI卡顿，且写法冗余（_image[i]本身就是File类型，无需再套一层File构造）
• 无请求状态校验：未判断响应的HTTP状态码，无论接口返回成功/失败都直接执行提交成功逻辑
• 函数定义错误：返回值Future<Future<bool?>?>属于语法冗余错误，入参filePath全程未使用，属于无效参数
• 缺失必要请求头：若接口需要鉴权（如token）、指定表单规则等，未配置对应headers会直接被后端拦截

修复后代码 #

final List<File> _image = [];
// 修正函数定义，按需传入鉴权token等参数
Future<bool> uploadImage(String baseUrl, String? token) async {
  if (_image.isEmpty) {
    Fluttertoast.showToast(
        msg: "请至少选择一张图片",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );
    return false;
  }
  try {
    // 单请求添加所有图片
    var request = http.MultipartRequest('POST', Uri.parse(baseUrl + _scanQrCode));
    // 按需添加请求头，比如鉴权token
    if (token != null) {
      request.headers['Authorization'] = 'Bearer $token';
    }
    // 批量添加所有图片
    for (var img in _image) {
      request.files.add(await http.MultipartFile.fromPath(
        'picture[]', // 多图字段名，根据后端实际要求调整
        img.path,
        filename: img.path.split("/").last
      ));
    }
    // 发送请求
    var res = await request.send();
    // 校验状态码，通常200/201为成功，根据后端规则调整
    if (res.statusCode == 200) {
      var responseData = await res.stream.toBytes();
      var result = String.fromCharCodes(responseData);
      debugPrint('上传成功，返回结果：$result');
      _submitedSuccessfully(context);
      return true;
    } else {
      var errorMsg = await res.stream.bytesToString();
      debugPrint('上传失败，状态码：${res.statusCode}，错误信息：$errorMsg');
      Fluttertoast.showToast(msg: "上传失败，错误码：${res.statusCode}");
      return false;
    }
  } catch (e) {
    debugPrint('上传异常：$e');
    Fluttertoast.showToast(msg: "上传异常：${e.toString()}");
    return false;
  }
}

额外校验项 #

• 确认后端接收多图的字段名是否和代码中一致，部分后端框架要求为pictures或其他命名，需和后端接口规则保持一致
• 确认后端对图片大小、格式的限制，超出限制会直接返回失败

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