在 Flutter Web 中上傳多個文件（圖像）

Question

我希望用戶在一個上傳文件元素中上傳（到本地內存）多個文件。 我正在使用 Flutter web。 以下是我當前的代碼。 有任何想法嗎？

import 'package:flutter/material.dart';
import 'dart:html' as html;
import 'dart:typed_data';

import 'package:phototags/pages/tags_page.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // Code idea from: https://github.com/rjcalifornia/web_upload/blob/master/lib/widgets/web_upload.dart
  List<Uint8List> _selectedFilesBytes;
  GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  List<Widget> children = [];

  void startWebFilePicker() async {
    html.InputElement uploadInput = html.FileUploadInputElement();
    uploadInput.multiple = true;
    uploadInput.draggable = true;
    uploadInput.click();

    uploadInput.onChange.listen((e) {
      final files = uploadInput.files;

     // _selectedFilesBytes = [];
      for (var i = 0; i < files.length; i++) {
        final file = files[i];
        final reader = new html.FileReader();
        reader.onLoadEnd.listen((event) {
          _selectedFilesBytes.add(reader.result);
        });
        reader.onError.listen((event) {
          print('there was an error');
        });
        reader.readAsArrayBuffer(file);
      }
      setState(() {
        for (var imageBytes in _selectedFilesBytes) {
            children.add(Image.memory(imageBytes));
          }
      });
    });
  }

當前代碼沒有顯示錯誤，但似乎沒有將任何內容加載到“_selectedFilesBytes”變量中。

Answer 1

似乎圖像的位圖存儲在臨時輸入所擁有的 memory 中，當您的應用程序進入構建時它會被刷新。 我嘗試創建圖像數據的副本，使用

Image.memory(Uint8List.fromList(reader.result));

直接在 for() 中將 children 變量循環到小部件級別。 這成功了。