如何在网页中使用 file_picker 显示选取的图像？

Question

当文件路径位于网络平台中时，如何显示在网络中选取的file_picker图像？null

如果路径不为空，则显示图像就太容易了Image.file(File)：

Image.file(context.select<BlogProvider, File>((BlogProvider p) => p.image))

但它无法在网络中为图像创建文件，因为浏览器不提供文件路径并且它为空。

Future<void> pickImage() async {
    /// If [withReadStream] is set, picked files will have its byte data available as a [Stream<List<int>>]
    /// which can be useful for uploading and processing large files.
    FilePickerResult result = await FilePicker.platform.pickFiles(
      type: FileType.custom,
      allowedExtensions: ['jpg', 'jpeg'],
      withReadStream: true,
    );
    if (result != null) {
      PlatformFile file = result.files.single; //single means I am Picking just One file not more
      _blogImage = File(file.path);//Null in web ,but Ok in Android
      notifyListeners();
    } else {
      // User canceled the picker
    }

  }

Answer 1

当withReadStream设置为true时，可以通过以下方式访问所选图像：

        file.readStream.listen((event) {
          _blogImage = Image.memory(event);
          notifyListeners();
        });

但是当withReadStream为false时：

        _blogImage = Image.memory(file.bytes);
        notifyListeners();

虽然flutter for web中file.path为null，但file.name设置正确，我们可以显示它。

更多信息请点击此处

另一种方式（没有file_picker包）：

        file.readStream.listen((event) {
          _blogImage = Image.memory(event);
          notifyListeners();
        });