Flutter使用http发送Multipart请求时图片无法随请求体发送

问题排查与修复步骤 #

• 移除手动设置的Content-Type：http.MultipartRequest会自动生成包含boundary的multipart/form-data请求头，手动添加会覆盖这个正确的头，导致服务端无法解析文件。删除headers里的"Content-Type": "multipart/form-data"。
• 添加图片非空判断：代码中直接使用imgPath!会在图片为空时崩溃，且空图片不该添加到请求里，先判断imgPath不为空再添加文件。
• 指定文件MIME类型和文件名：显式设置图片的contentType和filename，帮助服务端正确识别文件类型。

修改后的完整代码 #

Future multipartPostRequestProfile(
      id, dob, country, state, gender, File? imgPath) async {
    var token = await storage.read(key: 'jwt');
    var request = http.MultipartRequest(
        'PUT', Uri.parse('url'));

    // 仅当图片存在时添加文件
    if (imgPath != null) {
      request.files.add(await http.MultipartFile.fromPath(
        "image",
        imgPath.path,
        filename: imgPath.path.split('/').last, // 提取文件名
        contentType: MediaType('image', 'jpeg'), // 根据实际图片类型调整，比如png用'image/png'
      ));
    }
    
    request.fields['dateOfBirth'] = dob;
    request.fields['country'] = country;
    request.fields['state'] = state;
    request.fields['gender'] = gender;

    // 只保留Authorization头，移除手动设置的Content-Type
    request.headers.addAll({
      "Authorization": "Bearer $token"
    });
    
    var res = await request.send();
    var result = await http.Response.fromStream(res);

    if (result.statusCode != 200)
      return {'result': result.statusCode, 'body': result.body};
    final Map<String, dynamic> responseData = jsonDecode(result.body);
    return responseData;
  }

额外检查点 #

• 确认服务端接收文件的字段名是image，和代码中一致。
• 测试时确保图片路径正确，文件存在且可读取。
• 如果是Android平台，检查是否申请了文件读取权限；iOS平台检查Info.plist中的相册访问权限配置。

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