在 Flutter Web 中上传多个文件（图像）

Posted 2023-02-23

【中文标题】在 Flutter Web 中上传多个文件（图像）

【英文标题】：Upload multiple files (images) in Flutter Web

【发布时间】：2020-08-13 21:48:15

【问题描述】：

我希望用户在一个上传文件元素中上传（到本地内存）多个文件。我正在使用 Flutter 网络。以下是我当前的代码。有什么想法吗？

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”变量中。

【问题讨论】：

这可能在某处有解决方案：***.com/questions/57063359/…

【参考方案1】：

似乎图像的位图存储在临时输入所拥有的内存中，当您的应用程序进入构建时，它会被刷新。我尝试使用

创建图像数据的副本

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

直接在for()中循环children变量到widget级别。这成功了。