Flutter如何通过Post请求同时上传字符串与Base64格式图片至API

要同时上传字符串字段和Base64格式的图片，核心是先把图片文件转成Base64字符串，再和其他字段一起组装成请求体。下面是具体实现步骤和修改后的代码：

1. 实现图片转Base64方法 #

先写一个工具方法，将选中的图片文件转换为Base64格式。如果还没实现图片选择功能，推荐用image_picker插件获取本地图片（直接在pubspec.yaml中添加依赖即可）。

import 'dart:convert';
import 'dart:io';

// 图片转Base64字符串
Future<String?> convertImageToBase64(File imageFile) async {
  try {
    // 读取图片字节数据
    List<int> imageBytes = await imageFile.readAsBytes();
    // 编码为Base64字符串
    String base64Image = base64Encode(imageBytes);
    // 若后端要求带格式前缀（如data:image/jpeg;base64,），取消下面注释
    // base64Image = 'data:image/jpeg;base64,$base64Image';
    return base64Image;
  } catch (e) {
    print('图片转Base64失败: $e');
    return null;
  }
}

2. 修改POST请求代码 #

原代码用Map作为请求体，默认采用application/x-www-form-urlencoded格式，对于超长的Base64字符串可能出现问题。建议改用application/json格式，将所有字段转为JSON字符串发送。

修改后的完整代码：

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

// 存储选中的图片文件
File? selectedImage;

// 图片选择方法（可选，用于获取本地图片）
Future<void> pickImage() async {
  final picker = ImagePicker();
  final pickedFile = await picker.pickImage(source: ImageSource.gallery);
  if (pickedFile != null) {
    selectedImage = File(pickedFile.path);
  }
}

void submit() async {
  // 先检查是否选中图片
  if (selectedImage == null) {
    Fluttertoast.showToast(msg: '请先选择图片');
    return;
  }

  try {
    // 将图片转为Base64
    String? base64Image = await convertImageToBase64(selectedImage!);
    if (base64Image == null) {
      Fluttertoast.showToast(msg: '图片转换失败');
      return;
    }

    // 组装请求体
    final requestBody = {
      'kategori': selectedValue.toString().toLowerCase(),
      'tanggal': dateinput.text,
      'deskripsi': fileinput.text,
      'file': base64Image
    };

    final response = await http.post(
      Uri.parse('https://yourendpoint.com'),
      body: json.encode(requestBody), // 将Map转为JSON字符串
      headers: {
        'access-token': 'access-token',
        'Content-Type': 'application/json' // 必须设置JSON格式头
      },
    );

    if (response.statusCode == 200) {
      Fluttertoast.showToast(msg: 'Keluhan anda akan segera kami tangani');
      Navigator.pop(context);
    } else {
      Fluttertoast.showToast(msg: 'Format yang anda masukkan salah');
      print(response.statusCode);
      print(response.body);
    }
  } catch (e) {
    print(e.toString());
    Fluttertoast.showToast(msg: '请求失败，请重试');
  }
}

关键注意事项 #

• Content-Type头：如果后端接收JSON格式，必须设置Content-Type: application/json，同时用json.encode()将Map转为JSON字符串作为请求体。
• Base64前缀：部分后端要求Base64字符串携带data:image/xxx;base64,前缀，可根据后端文档调整convertImageToBase64方法中的注释代码。
• 异常处理：新增了图片为空、转换失败的判断逻辑，避免空指针异常。

内容的提问来源于stack exchange，提问作者Fikry Ahmad Haykhal