如何从存储中选择多个图像并将其显示在Flutter和Flutter Web App中？

问题描述

我正在使用此Flutter应用程序，该应用程序允许用户从本地存储中选择多个图像进行上传。选择图像后，它会显示所有图像的预览。

我可以通过移动Flutter应用程序实现此目标，但我还需要定位Flutter Web，但不适用于Flutter Web。我使用了plugin，因为它还可以为Flutter网站选择多个文件，但是它返回了List<html.File>，这不允许我读取图像字节以在UI中显示它。

我需要一个插件：

• 允许选择多张图片
• 在Flutter网页上也可以使用
• 允许访问图像字节数据，以便我可以显示它们的预览

解决方法

您可以在下面复制粘贴运行完整代码
在此拉取请求之前合并https://github.com/miguelpruivo/flutter_file_picker/pull/328/files/3e23d4e9977451d4e84f54a155ac1b2a951cd7fe
代码段

Future<List<int>> fileAsBytes(html.File _file) async {
    final Completer<List<int>> bytesFile = Completer<List<int>>();
    final html.FileReader reader = html.FileReader();
    reader.onLoad.listen((event) => bytesFile.complete(reader.result));
    reader.readAsArrayBuffer(_file);
    return await bytesFile.future;
  }
  
ListView.separated(
        itemBuilder: (BuildContext context,int index) =>
            Column(
          children: [
            FutureBuilder<List<int>>(
                future: fileAsBytes(_files[index]),builder: (context,snapshot) => snapshot.hasData
                    ? Image.memory(snapshot.data)
                    : CircularProgressIndicator()),Text("name ${_files[index].name}"),],),

工作演示
选择两个图像文件并显示，不要检查文件类型是否为图像

完整代码

// ignore: avoid_web_libraries_in_flutter
import 'dart:async';
import 'dart:html';
import 'package:file_picker_web/file_picker_web.dart';
import 'package:flutter/material.dart';
import 'dart:html' as html;

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<html.File> _files = [];

  Future<List<int>> fileAsBytes(html.File _file) async {
    final Completer<List<int>> bytesFile = Completer<List<int>>();
    final html.FileReader reader = html.FileReader();
    reader.onLoad.listen((event) => bytesFile.complete(reader.result));
    reader.readAsArrayBuffer(_file);
    return await bytesFile.future;
  }

  void _pickFiles() async {
    _files = await FilePicker.getMultiFile() ?? [];
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.stretch,children: <Widget>[
              Expanded(
                child: _files.isNotEmpty
                    ? ListView.separated(
                        itemBuilder: (BuildContext context,int index) =>
                            Column(
                          children: [
                            FutureBuilder<List<int>>(
                                future: fileAsBytes(_files[index]),snapshot) => snapshot.hasData
                                    ? Image.memory(snapshot.data)
                                    : CircularProgressIndicator()),itemCount: _files.length,separatorBuilder: (_,__) => const Divider(
                          thickness: 5.0,)
                    : Center(
                        child: Text(
                          'Pick some files',textAlign: TextAlign.center,Padding(
                padding: const EdgeInsets.all(15.0),child: RaisedButton(
                  onPressed: _pickFiles,child: Text('Pick Files'),)
            ],);
  }
}