如何在Flutter中实现图片上传至服务器？

下面是具体的实现步骤和代码示例：

1. 添加依赖 #

在pubspec.yaml中引入所需依赖包：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0
  image_picker: ^1.0.4

执行flutter pub get完成依赖安装。

2. 选择本地图片 #

用image_picker库调用系统相册或相机获取图片：

import 'package:image_picker/image_picker.dart';

Future<XFile?> pickImage() async {
  final ImagePicker picker = ImagePicker();
  // 从相册选图，替换为ImageSource.camera可调用相机拍照
  final XFile? image = await picker.pickImage(source: ImageSource.gallery);
  return image;
}

3. 构建并发送上传请求 #

通过http库的MultipartRequest发送包含图片的表单请求：

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

Future<String> uploadImage(XFile image) async {
  var request = http.MultipartRequest(
    'POST',
    Uri.parse('你的服务器上传接口地址'), // 替换为实际的后端接口
  );
  
  // 添加图片文件到请求中
  request.files.add(
    await http.MultipartFile.fromPath(
      'image', // 对应服务器接收的字段名
      image.path,
      filename: image.name,
    ),
  );
  
  // 可选：添加额外的表单参数
  request.fields['user_id'] = '123';
  
  var response = await request.send();
  if (response.statusCode == 200) {
    return await response.stream.bytesToString();
  } else {
    throw Exception('图片上传失败');
  }
}

4. 整合调用逻辑 #

在界面中添加触发按钮，串联选图和上传流程：

ElevatedButton(
  onPressed: () async {
    XFile? image = await pickImage();
    if (image != null) {
      try {
        String result = await uploadImage(image);
        print('上传成功返回：$result');
      } catch (e) {
        print('上传出错：$e');
      }
    }
  },
  child: const Text('选择并上传图片'),
)

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