Flutter File_picker软件包在上传前显示所选图像

ilmyapht  于 2022-11-17  发布在  Flutter
关注(0)|答案(2)|浏览(220)

我正在制作一个应用程序,其中一部分涉及用户选择多个图像并将其上传到firebase存储。为此,我使用了文件拾取器包,但我无法在上传之前向用户显示拾取的图像。
到目前为止,我所看到的所有教程都只展示了如何返回所选文件的详细信息(名称、大小等),但没有展示如何在某种网格视图中显示实际所选的图像。任何帮助都将不胜感激。
我用来从图库选取档案的程式码

List<File> files=[];
pickFiles() async {
    try {

      FilePickerResult? result = await FilePicker.platform.pickFiles(allowMultiple: true,allowedExtensions: ['jpg', 'png'],);

      if (result != null) {
        setState(() {
          files = result.paths.map((path) => File(path!)).toList();
        });
      } else {
        // User canceled the picker
      }
    } on PlatformException catch (e) {
      print("Unsupported operation" + e.toString());
    }
    if (!mounted) return;
  }
o3imoua4

o3imoua41#

你可以通过我的solution
我在这里创建了一个图像拾取器部件,您可以使用它来拾取图像,在您拾取图像后,它们会显示在一个类似网格视图的WRAP部件中。您只需要为图像拾取器函数添加allowMultipleImage标记,就可以拾取多个图像。
如果你想控制图片列表,也就是上传后清除图片,你可以阅读我的this解决方案,它只是前一个的修改形式。

ecr0jaav

ecr0jaav2#

您必须将路径转换为FileImage,以便在图像小部件中显示它:

final result = await FilePicker.platform.pickFiles(allowMultiple: false);
 if (result == null) return;
 final files = result.files; //EDIT: THIS PROBABLY CAUSED YOU AN ERROR
 String textt = result.files.first.path.toString();
 dynamic placeholder = FileImage(File(textt));

这是一个完整的视频,显示从文件选择器到图像小部件https://www.youtube.com/watch?v=oag9VeHfOm4的图像
Github:https://github.com/MIRTAHAALI/flutter_file_picker/blob/main/main.dart

相关问题