Flutter使用FadeInImage加载本地缓存图片遇Invalid image data错误求助

错误详情 #

图片加载报错 #

══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
The following _Exception was thrown resolving an image codec:
Exception: Invalid image data

When the exception was thrown, this was the stack:
#0      _futurize (dart:ui/painting.dart:6634:5)
#1      ImageDescriptor.encoded (dart:ui/painting.dart:6491:12)
#2      instantiateImageCodecWithSize (dart:ui/painting.dart:2288:60)
#3      PaintingBinding.instantiateImageCodecWithSize (package:flutter/src/painting/binding.dart:182:15)
#4      FileImage._loadAsync (package:flutter/src/painting/image_provider.dart:1598:20)
<asynchronous suspension>

Path: /data/user/0/blog.myapp.app.dev/cache/mediaCache/2109fa3c-0452-4bc4-875b-5a50e07923e0.jpg

上传失败提示 #

Upload a valid image.The file you uploaded with either not an image or a corrupted image.

后端API日志 #

my-api            | 2023-11-06 06:56:24,421 django.request WARNING  Bad Request: /api/auth/user/
my-api            | 2023-11-06 06:56:24,422 django.server WARNING  "PATCH /api/auth/user/ HTTP/1.1" 400 104

相关代码 #

if (imageFile != null) {
      finalImage = FadeInImage(
        fit: BoxFit.cover,
        height: imageSize,
        width: imageSize,
        placeholder: const AssetImage(DEFAULT_IMAGE_ASSET),
        image: FileImage(File(imageFile!.path!)),
      );
      
else if (imageUrl != null) {
      finalImage = Image(
          height: imageSize,
          width: imageSize,
          fit: BoxFit.cover,
          image: AdvancedNetworkImage(imageUrl!,
              useDiskCache: true,
              fallbackAssetImage: DEFAULT_IMAGE_ASSET,
              retryLimit: 0));

解决方案 #

1. 验证本地缓存文件有效性并降级处理 #

缓存文件损坏是加载报错的核心原因，在加载前先验证文件是否可解析：

if (imageFile != null) {
  final bytes = await imageFile!.readAsBytes();
  try {
    // 尝试解码图片，验证有效性
    await decodeImageFromList(bytes);
    finalImage = FadeInImage(
      fit: BoxFit.cover,
      height: imageSize,
      width: imageSize,
      placeholder: const AssetImage(DEFAULT_IMAGE_ASSET),
      image: FileImage(imageFile!),
    );
  } catch (e) {
    // 文件损坏时显示占位图
    finalImage = Image.asset(
      DEFAULT_IMAGE_ASSET,
      fit: BoxFit.cover,
      height: imageSize,
      width: imageSize,
    );
    // 可选：删除损坏的缓存文件
    await imageFile!.delete();
  }
}

2. 修复图片上传逻辑 #

上传失败说明文件本身无效，需确保上传的是完整有效的文件：

• 优先使用用户选择的原始文件上传，而非缓存文件；
• 确保上传请求使用正确的multipart/form-data格式：

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

// 示例上传代码
Future<void> uploadImage(File imageFile) async {
  final uri = Uri.parse('https://your-api-domain/api/auth/user/');
  var request = http.MultipartRequest('PATCH', uri);
  
  // 添加文件，注意字段名要和后端接收的一致（比如'avatar'）
  request.files.add(await http.MultipartFile.fromPath('avatar', imageFile.path));
  
  // 添加认证头（如果需要）
  request.headers['Authorization'] = 'Bearer your-token';
  
  final response = await request.send();
  if (response.statusCode == 200) {
    // 上传成功，更新UI
  } else {
    // 处理错误
  }
}

3. 替换不稳定的缓存库 #

AdvancedNetworkImage的缓存机制可能存在文件写入不完整的问题，建议改用官方推荐的cached_network_image库：

1. 在pubspec.yaml添加依赖：

dependencies:
  cached_network_image: ^3.3.0

2. 修改网络图片加载代码：

else if (imageUrl != null) {
  finalImage = CachedNetworkImage(
    height: imageSize,
    width: imageSize,
    fit: BoxFit.cover,
    imageUrl: imageUrl!,
    placeholder: (context, url) => Image.asset(DEFAULT_IMAGE_ASSET, fit: BoxFit.cover),
    errorWidget: (context, url, error) => Image.asset(DEFAULT_IMAGE_ASSET, fit: BoxFit.cover),
    cacheManager: DefaultCacheManager(), // 默认缓存管理，稳定可靠
  );
}

4. 后端Django验证排查 #

• 检查Django模型中图片字段的验证规则，确保没有过度限制格式或大小；
• 确认后端接收multipart/form-data的逻辑正确，没有丢失文件数据；
• 可以临时在后端打印上传文件的大小、MIME类型，排查是否为文件传输过程中损坏。

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