flutter中处理图像缓冲区数据并显示从Mongodb数据库获取的图像

Question

我正在开发一个 flutter 项目（俱乐部管理应用程序）。我在后端使用节点 API。我可以使用多部分文件将图像与其余用户数据保存到数据库中，作为响应，我获得缓冲区类型的图像数据。但我无法将图像数据分配给用户模型类中的变量。

我附上了以下代码、响应数据和错误以提供一些上下文。 这是用于接收数据的用户模型类。

  class User {
  String name = '';
  String email = '';
  String username = '';
  List<dynamic> profilepic = <dynamic>[];
  String token = '';

  User(this.name, this.email, this.token, this.username, this.profilepic);

  User.fromJson(Map<String, dynamic> json) {
    User(
      name = json['user']['name'],
      email = json['user']['email'],
      username = json['user']['username'],
      profilepic = json['user']['profilepic']['data'],
      token = json['token'],
    );
  }
}

以下函数用于发送和接收用户详细信息。

  upload(File imageFile, String username, String name, String email) async {
    var uri = "http://192.168.0.121:3000/newuser";
    String fileName = imageFile.path.split('/image_picker').last;

    FormData data = FormData.fromMap({
      'name': name,
      'email': email,
      'username': username,
      "myFile": await MultipartFile.fromFile(
        imageFile.path,
        filename: fileName,
      ),
    });

    BaseOptions options = new BaseOptions(responseType: ResponseType.plain);

    Dio dio = new Dio(options);

    dio.post(uri, data: data).then((response) {
      var jsonResponse = response.data;
      var decoded = jsonDecode(jsonResponse);
      print(decoded);
      var usersigned = User.fromJson(decoded);
      print(usersigned.name);
      print(usersigned.username);

      setState(() {});
    }).catchError((error) => print(error));
  }

以下是节点服务器的响应。

I/flutter (10733): {user: {name: Aniket Raj, email: [email protected], username: Aniket, profilepic: {type: Buffer, data: [255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 255, 219, 0, 67, 0, 8, 6, 6, 7, 6, 5, 8, 7, 7, 7, 9, 9, 8, 10, 12, 20, 13, 12, 11, 11, 12, 25, 18, 19, 15, 20, 29, 26, 31, 30, 29, 26, 28, 28, 32, 36, 46, 39, 32, 34, 44, 35, 28, 28, 40, 55, 41, 44, 48, 49, 52, 52, 52, 31, 39, 57, 61, 56, 50, 60, 46, 51, 52, 50, 255, 219, 0, 67, 1, 9, 9, 9, 12, 11, 12, 24, 13, 13, 24, 50, 33, 28, 33, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 255, 194, 0, 17, 8, 3, 222, 2, 238, 3, 1, 34, 0, 2, 17, 1, 3, 17, 1, 255, 196, 0, 26, 0, 1, 0, 3, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 4, 5, 3, 6, 255, 196, 0, 25, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 255, 218, 0, 12, 3, 1, 0, 2, 16, 3, 16, 0, 0, 2, 229, 132, 0

以下是使用用户模型保存用户照片时收到的错误。

I/flutter (10733): type 'List<dynamic>' is not a subtype of type 'String'

我尝试将照片数据类型更改为字符串但无济于事。该代码无需配置文件字段即可工作。

如果您也能告诉我应该如何使用 flutter 中的缓冲区数据渲染图像，那就太好了。

Answer 1

我想我也遇到了和你一样的问题。

尝试一下，您认为您还需要将班级中的个人资料图片类型更改为 Uint8List。

profilepic: Uint8List.fromList((json['user']['profilepic']['data'] as List)
             ?.map((e) => e as int)
             ?.toList())