在 Flutter Web 中显示所选图像

Question

由于 flutter web 处于技术预览阶段，none 个插件正在运行。

我有一个显示图像的任务，我们select。我有以下选择器

_startFilePicker() async {
InputElement uploadInput = FileUploadInputElement();
uploadInput.multiple = true;
uploadInput.click();

uploadInput.onChange.listen((e) {
  // read file content as dataURL
  final files = uploadInput.files;
  if (files.length == 1) {
    final file = files[0];
    final reader = FileReader();

    reader.onLoadEnd.listen((e) {
      _handleResult(reader.result);
          });
          reader.readAsDataUrl(file);
        }
      });
      }

        void _handleResult(Object result) {
          setState(() {
            images.add(result);
          });
        }

result 给我输出 data:image/jpeg;base64,/9j/4AAQSkZJRg....

如何在图像小部件中显示此输出？

我尝试使用 Image.memory(base64Decode(file))。但是文件无法解码。我怀疑是因为它不是原始 base64。

如何将此输出转换为可见图像？还有如何处理多张图片？

谢谢

Answer 1

在您的 base64 字符串中，排除 "data:image/jpeg;base64," 并仅保留“/9j/4AAQSkZJRg...”

将您的 base64 字符串粘贴到在线图像转换器 https://codebeautify.org/base64-to-image-converter，以确保您的 base64 字符串正确

_base64 = "/9j/4AAQSkZJRg...";

解码

Uint8List bytes = base64Decode(_base64);

并显示图像

Image.memory(bytes);

你也可以参考这个

在 Flutter Web 中显示所选图像

Display selected image in Flutter Web

image

file

show

flutter-web