Flutter File_picker软件包在上传之前显示选定的图像

Question

我正在制作一个应用程序，其中一部分涉及用户选择多个图像并将其上传到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;
}

Answer 1

您可以浏览我的解决方案。

我在这里创建了一个图像选择器小部件，您可以使用它来拾取图像，在拾取图像后，它们将显示在类似网格的WRAP小部件中。您只需要为图像拾取函数添加allowMultipleImage的标记即可拾取多个图像。

如果你想控制图像列表，也就是说在上传后清除图像，你可以阅读我的这个解决方案，它只是前一个的修改形式。

Answer 2

您必须将路径转换为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