如何 Select 从存储中提取多个图像并在 Flutter 和 Flutter Web App 中显示？

Question

我正在开发这个 Flutter 应用程序，它允许用户 select 从本地存储上传多张图片。 select编辑图像后，它会显示所有图像的预览。

我可以为移动 Flutter 应用程序实现此目的，但我还需要以 flutter web 为目标，这不适用于 flutter web。我使用这个 plugin 因为它允许 select Flutter web 的多个文件但是它返回 List<html.File> 这不允许我读取图像字节以在 UI.

我需要一个解决方案：

允许 select 多张图片
同样适用于 flutter web
允许访问图像字节数据以便我可以显示它们的预览

Answer 1

您可以复制粘贴运行下面的完整代码
在此拉取请求合并之前 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}"),
          ],
        ),

工作演示
select两个图片文件并显示，不检查文件类型是图片

完整代码

// 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]),
                                builder: (context, snapshot) => snapshot.hasData
                                    ? Image.memory(snapshot.data)
                                    : CircularProgressIndicator()),
                            Text("name ${_files[index].name}"),
                          ],
                        ),
                        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'),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

如何 Select 从存储中提取多个图像并在 Flutter 和 Flutter Web App 中显示？

How to Select Multiple Images from Storage and display it in both Flutter and Flutter Web App?

flutter

flutter-plugin

flutter-web