Flutter从MySQL BLOB加载图片：Future<Uint8List>类型不匹配问题

我需要从MySQL数据库的BLOB列读取字节数据加载图片，写了如下代码，但运行报错：

获取字节数据的代码 #

class MySqlModel {
  Future<Uint8List> connectionFunc(String _Username, String _FileName) async {
    final conn = await MySQLConnection.createConnection(
      host: "",
      port: 0000,
      userName: "",
      password: "-0",
      databaseName: "", 
    );

    await conn.connect();
    var _SelectFileByte = await conn.execute("SELECT FILE_BYTE FROM image_tab WHERE USERNAME = :username AND FILEANME = :filename",
    {
      "username": _Username,
      "filename": _FileName 
    });
    var _getByteValue;
    for(var Res in _SelectFileByte.rows) {
      _getByteValue = await Res.assoc()['FILE_BYTE'];
    }
    return await _getByteValue;
  }
}

加载图片的代码 #

body: Container(
        alignment: Alignment.center,
        child: Column(
          children: [
            SizedBox(
              height:300,
              width:400,
              child: Image.memory(MySqlModel().connectionFunc("henrydaniel","dad1.png")),
            )
          ]
        )
      ),

运行时出现错误：The argument type 'Future<Uint8List>' can't be assigned to the parameter type 'Uint8List'。尝试将Future<Uint8List> connectionFunc()改为Uint8List connectionFunc()后，又报错：

Functions marked 'async' must have a return type assignable to 'Future'.
Try fixing the return type of the function, or removing the modifier 'async' from the function body.

数据库连接必须依赖Future，想知道如何正确获取可用的Uint8List字节值加载图片。插入数据库的字节数据是通过Uint8List _getFileValues = File(_FilePathVal).readAsBytesSync();获取的。

核心问题原因 #

connectionFunc是异步函数，调用后返回的是Future<Uint8List>，但Image.memory需要的是已经完成的Uint8List实例，不能直接传递Future对象。同时数据库操作本身是异步的，必须保留async/await，不能改成同步函数。

修正步骤 #

1. 优化数据获取函数
   修复连接泄漏问题（使用完数据库连接后关闭），同时简化查询结果处理（因为查询条件应该只返回一行数据，无需循环）：

   class MySqlModel {
     Future<Uint8List?> connectionFunc(String _Username, String _FileName) async {
       final conn = await MySQLConnection.createConnection(
         host: "",
         port: 0000,
         userName: "",
         password: "-0",
         databaseName: "", 
       );
   
       try {
         await conn.connect();
         final result = await conn.execute(
           "SELECT FILE_BYTE FROM image_tab WHERE USERNAME = :username AND FILENAME = :filename",
           {
             "username": _Username,
             "filename": _FileName 
           },
         );
         // 只取第一行数据，避免循环
         if (result.rows.isNotEmpty) {
           return result.rows.first.assoc()['FILE_BYTE'] as Uint8List;
         }
         return null;
       } finally {
         // 无论是否成功，都关闭连接
         await conn.close();
       }
     }
   }
   

2. 使用FutureBuilder处理异步UI
   在Flutter中，需要用FutureBuilder来等待异步操作完成，再构建Image组件：

   body: Container(
     alignment: Alignment.center,
     child: Column(
       children: [
         SizedBox(
           height: 300,
           width: 400,
           child: FutureBuilder<Uint8List?>(
             future: MySqlModel().connectionFunc("henrydaniel", "dad1.png"),
             builder: (context, snapshot) {
               if (snapshot.connectionState == ConnectionState.waiting) {
                 // 加载中显示占位符
                 return const CircularProgressIndicator();
               } else if (snapshot.hasError) {
                 // 出错时显示错误信息
                 return Text('加载失败: ${snapshot.error}');
               } else if (snapshot.hasData && snapshot.data != null) {
                 // 数据加载完成，显示图片
                 return Image.memory(snapshot.data!);
               } else {
                 // 没有数据时显示占位
                 return const Text('未找到图片');
               }
             },
           ),
         )
       ],
     ),
   ),
   

关键说明 #

• FutureBuilder会根据异步操作的状态（等待、完成、出错）自动更新UI，完美适配异步数据加载场景。
• 数据库连接必须在finally块中关闭，避免连接池耗尽。
• 增加了空值判断，避免因查询不到数据导致的异常。

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