Flutter中如何用http包发送含图片与JSON体的Multipart HTTP请求

MultipartRequest完全支持同时发送普通文本字段和文件，你遇到的问题大概率是字段配置或者文件处理环节出错，以下是可直接复用的实现方案：

实现步骤与代码示例 #

1. 先确保依赖已添加到pubspec.yaml：

dependencies:
  http: ^1.1.0
  image_picker: ^1.0.4 # 用于选择本地图片，按需添加

2. 完整请求代码：

import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:image_picker/image_picker.dart';

Future<void> submitRegistration() async {
  // 1. 选择头像图片（示例用相册选择，也可调用相机）
  final ImagePicker picker = ImagePicker();
  final XFile? image = await picker.pickImage(source: ImageSource.gallery);
  if (image == null) return;

  // 2. 初始化Multipart请求
  final uri = Uri.parse('你的注册接口URL');
  final request = http.MultipartRequest('POST', uri);

  // 3. 添加用户信息文本字段（字段名需和后端接口定义一致）
  request.fields['username'] = 'test_user';
  request.fields['email'] = 'test@example.com';
  request.fields['password'] = '123456';

  // 4. 添加头像文件字段
  final imageFile = File(image.path);
  final multipartFile = await http.MultipartFile.fromPath(
    'avatar', // 后端接收图片的字段名
    imageFile.path,
    contentType: MediaType('image', 'jpeg'), // 根据实际图片类型调整，比如png则改为image/png
  );
  request.files.add(multipartFile);

  // 5. 发送请求并处理响应
  try {
    final response = await request.send();
    if (response.statusCode == 200) {
      print('注册成功');
      // 可进一步解析响应内容
      final responseBody = await response.stream.bytesToString();
      print(responseBody);
    } else {
      print('注册失败，状态码：${response.statusCode}');
    }
  } catch (e) {
    print('请求出错：$e');
  }
}

关键注意事项 #

• 所有字段名（包括文本字段和文件字段）必须严格匹配后端接口的参数名，这是最容易出错的点
• 图片的contentType要和实际文件类型一致，否则后端可能无法正确解析
• 如果是Android/iOS平台，需提前配置图片访问权限（比如Android的READ_MEDIA_IMAGES，iOS的Photo Library权限）

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