Flutter安卓端image_picker相机拍摄图片无法上传服务器

安卓端Flutter应用使用image_picker实现选图功能时，相册选取的图片可以正常上传到服务器，相机拍摄的图片前端可正常展示但上传失败。

问题由三类原因共同导致：

• 安卓端配置缺失：缺少必要权限、明文HTTP请求被系统拦截、模拟器本地回环地址配置错误
• 代码逻辑缺陷：未做图片压缩导致相机原图base64编码后体积超过服务器请求上限、未处理空指针和IO异常、未等待文件完全写入就读取数据
• 通用误区：安卓模拟器访问宿主机本地服务不能用127.0.0.1，该地址指向模拟器自身

1. 调整安卓端配置 #

补全权限配置 #

打开android/app/src/main/AndroidManifest.xml，在<manifest>根节点下添加以下权限：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="28" />

在<application>节点添加两个属性，适配分区存储和明文HTTP请求：

<application
        android:label="你的应用名称"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:requestLegacyExternalStorage="true"
        android:networkSecurityConfig="@xml/network_security_config">

添加网络安全规则 #

新建文件android/app/src/main/res/xml/network_security_config.xml，写入以下配置允许本地HTTP请求：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">10.0.2.2</domain>
        <domain includeSubdomains="true">127.0.0.1</domain>
    </domain-config>
</network-security-config>

注意：安卓模拟器访问宿主机本地服务必须使用10.0.2.2替代127.0.0.1，真机调试需替换为电脑的局域网IP

2. 修复代码逻辑 #

原有代码存在未压缩图片、无异常捕获、空指针风险等问题，修正后完整代码如下：

import 'dart:convert';
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:http/http.dart' as http;

void main(){
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  XFile? _image; 
  final ImagePicker _picker = ImagePicker();
  List<int>? imageData;
  String? filename;

  Future<void> _pickImage(ImageSource source) async {
    try {
      final XFile? pickedFile = await _picker.pickImage(
        source: source,
        imageQuality: 70,
        maxWidth: 1920,
      );
      if (pickedFile == null) return;
      
      final bytes = await pickedFile.readAsBytes();
      
      setState(() {
        _image = pickedFile;
        imageData = bytes;
        filename = pickedFile.name;
      });
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('选图失败: $e'))
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("image upload")),
        body: SingleChildScrollView(
          child: Column(
            children: [
              FloatingActionButton(
                onPressed: () => _pickImage(ImageSource.gallery),
                child: const Icon(Icons.photo, color: Colors.white, size: 28.0),
              ),          
              const SizedBox(height: 30.0),          
              FloatingActionButton(
                onPressed: () => _pickImage(ImageSource.camera),
                child: const Icon(Icons.camera, color: Colors.white, size: 28.0),
              ),
              SizedBox(
                width: 100,
                height: 100,
                child: _image != null 
                  ? kIsWeb
                    ? Image.network(_image!.path, fit: BoxFit.cover)
                    : Image.file(File(_image!.path), fit: BoxFit.cover)
                  : const Text('No Image'),
              ),
              ElevatedButton(
                onPressed: imageData == null ? null : uploadImage,
                child: const Text("Upload", style: TextStyle(color: Colors.white)),
              ),
              if (imageData != null) Text('图片大小: ${(imageData!.length / 1024).toStringAsFixed(2)}KB'),
            ]
          ),
        )
      )
    );
  }

  Future uploadImage() async {
    if (imageData == null || filename == null) return;
    
    try {
      final uri = Uri.parse('http://10.0.2.2/api/upload-image');
      const headers = {'Content-Type':'application/json'};
      final data = {
        'file' : base64Encode(imageData!),
        'filename': filename!
      };
      
      final response = await http.post(
        uri,
        body: jsonEncode(data),
        headers: headers,
      ).timeout(const Duration(seconds: 30));
      
      if(mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text(response.statusCode == 200 ? '上传成功' : '上传失败，状态码: ${response.statusCode}'))
        );
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('上传出错: $e'))
        );
      }
    }     
  }
}

• 如果压缩后仍上传失败，检查服务器请求体大小限制，常见后端框架默认上限为1-2M，可适当调低imageQuality参数
• 图片上传优先使用multipart/form-data格式传原始文件字节，比base64编码省30%左右的体积，传输效率更高
• 生产环境必须使用HTTPS接口，避免明文传输被系统拦截和数据泄露

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