Flutter中Uint8List图片转存Firestore后加载失败排查

你当前的转换逻辑完全错误：

• 上传时调用_previewImage.toString()，得到的是Uint8List的字符串表示形式（比如[255, 216, 255, ...]），而非原始字节的编码字符串
• 读取时用codeUnits转换，得到的是这个字符串每个字符的ASCII编码列表，和原始图片字节完全无关，自然无法解析成图片

使用Base64编码来实现Uint8List和字符串的互转，这是二进制数据转字符串存储的标准方式：

修改上传代码 #

import 'dart:convert'; // 需导入该包

Future _pageDrawScreen() async {
  Uint8List? _previewImage = await _testController.capture();
  if (_previewImage == null) {
    logger.d("_previewImage null");
    return;
  }

  // 用Base64编码Uint8List为字符串
  _pageModel!.previewImage = base64Encode(_previewImage);

  // Firestore update
}

修改读取展示代码 #

import 'dart:convert'; // 需导入该包

Widget _pageContainer(int index, PageModel pageModel) {
  Uint8List? previewImage;

  if (pageModel.previewImage != null) {
    // 用Base64解码字符串回Uint8List，添加异常捕获避免崩溃
    try {
      previewImage = base64Decode(pageModel.previewImage!);
    } catch (e) {
      logger.d("图片解码失败: $e");
    }
  }

  return ListTile(
    title: previewImage != null
        ? ExtendedImage.memory(
            previewImage,
            width: 125,
            height: 125,
            fit: BoxFit.cover,
            loadStateChanged: (state) {
              switch (state.extendedImageLoadState) {
                case LoadState.loading:
                  return const SizedBox(
                    width: 50,
                    height: 50,
                    child: CircularProgressIndicator(color: Colors.red),
                  );
                case LoadState.completed:
                  return null;
                case LoadState.failed:
                  return const Material(
                    color: Colors.white,
                    child: Icon(Icons.cancel, color: Colors.red, size: 50),
                  );
              }
            },
          )
        : Container(
            width: 125,
            height: 125,
            color: Colors.white,
            child: const Center(child: CircularProgressIndicator()),
          ),
  );
}

补充说明 #

1. 必须导入dart:convert包，否则Base64相关方法无法调用
2. 解码时添加try-catch，避免因存储的字符串损坏或格式错误导致应用崩溃
3. Firestore单文档最大限制为1MB，若图片体积过大，建议改用Firebase Storage存储图片，Firestore仅存储图片的访问URL

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