如何在 Flutter web 中显示 dart:html 文件图像？答案

【问题标题】：How to display a dart:html file image in Flutter web?如何在 Flutter web 中显示 dart:html 文件图像？
【发布时间】：2020-12-16 03:33:11
【问题描述】：

我以这种方式从用户设备上传文件：

void uploadImage() async {
    html.InputElement uploadInput = html.FileUploadInputElement();
    uploadInput.click();
    uploadInput.onChange.listen(
      (changeEvent) {
        final file = uploadInput.files.first;
        final reader = html.FileReader();

        reader.readAsDataUrl(file);
        reader.onLoadEnd.listen(
          (loadEndEvent) async {
            setState(() {
              image = file; //image is a dart:html File object, it's a field of my statefulwidget
            });
          },
        );
      },
    );
  }
}

我想显示这张图片。我尝试使用 Image.file：

           Container(
              width: 100,
              height: 100,
              child: Image.file(
                image,
                fit: BoxFit.contain,
              ),
            ),

但是这给了我这个错误：

参数类型“文件（其中文件在 C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\html\html_dart2js.dart 中定义）”不能分配给参数类型“文件” （其中文件在 C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\io\file.dart 中定义）'.dartargument_type_not_assignable html_dart2js.dart(15975, 7)：文件定义在 C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\html\html_dart2js.dart file.dart(241, 16)：文件定义在 C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\io\file.dart 窥视问题 (Alt+F8) 没有可用的快速修复

有没有办法将 dart:html 文件转换为 dart:io 文件？还是我应该尝试另一种显示图像的方式？在那种情况下，我如何显示 dart:html 文件？

提前感谢您的帮助！

【问题讨论】：

你得到答案了吗？
不，我还没有收到答复。

标签： html image flutter dart flutter-web

【解决方案1】：

一种解决方案是使用image_whisperer 包。

假设您的html.File 是变量myfile，以下对我有用：

import 'package:flutter/painting.dart';  // NetworkImage
import 'package:image_whisperer/image_whisperer.dart';  // BlobImage
...

BlobImage blobImage = new BlobImage(myfile, name: myfile.name);
final image = NetworkImage(blobImage.url);

// Use image here
...

【讨论】：