如何在flutter web中监听（“关闭”事件）文件下载窗口？

Posted 2023-02-23

【中文标题】如何在flutter web中监听（“关闭”事件）文件下载窗口？

【英文标题】：How to listen("close" event) to the file download window in flutter web?

【发布时间】：2020-12-01 07:32:26

【问题描述】：

我的代码允许使用universal_html.InputElement uploadInput = universal_html.FileUploadInputElement();web Flutter打开文件上传窗口，并选择必要的文件将它们加载到项目中。如果用户没有选择任何照片并单击关闭/取消窗口，我想对此做出反应。 我如何理解用户关闭窗口？

  final completer = Completer<List<String>>();
  universal_html.InputElement uploadInput = universal_html.FileUploadInputElement();
  uploadInput.multiple = true;
  uploadInput.accept = 'image/*';
  uploadInput.click();

  uploadInput.addEventListener('change', (e) async 
    final files = uploadInput.files;
    Iterable<Future<String>> resultsFutures = files.map((file) 
      final reader = universal_html.FileReader();
      reader.readAsDataUrl(file);
      reader.onError.listen((error) => completer.completeError(error));
      return reader.onLoad.first.then((_) => reader.result as String);
    );
    final results = await Future.wait(resultsFutures);
    completer.complete(results);
  );

  universal_html.document.body.append(uploadInput);
  final List<String> images = await completer.future;

  uploadInput.remove();

【参考方案1】：

在包file_picker的Web实现中使用了一种管理此类事件的方法。

这里有一个代码示例来帮助你（你也可以从包here找到完整的实现）：

import 'dart:html' as html;
import 'dart:async';

Future<html.File?> pickFile(String type) async 
  final completer = Completer<List<html.File>?>();
  final input = html.FileUploadInputElement() as html.InputElement;
  input.accept = '$type/*';

  var changeEventTriggered = false;
  void changeEventListener(html.Event e) 
    if (changeEventTriggered) return;
    changeEventTriggered = true;

    final files = input.files!;
    final resultFuture = files.map<Future<html.File>>((file) async 
      final reader = html.FileReader();
      reader.readAsDataUrl(file);
      reader.onError.listen(completer.completeError);
      return file;
    );
    Future.wait(resultFuture).then((results) => completer.complete(results));
  

  void cancelledEventListener(html.Event e) 
    html.window.removeEventListener('focus', cancelledEventListener);

    // This listener is called before the input changed event,
    // and the `uploadInput.files` value is still null
    // Wait for results from js to dart
    Future.delayed(Duration(milliseconds: 500)).then((value) 
      if (!changeEventTriggered) 
        changeEventTriggered = true;
        completer.complete(null);
      
    );
  

  input.onChange.listen(changeEventListener);
  input.addEventListener('change', changeEventListener);

  // Listen focus event for cancelled
  html.window.addEventListener('focus', cancelledEventListener);

  input.click();

  final results = await completer.future;
  if (results == null || results.isEmpty) return null;
  return results.first;

这个想法是依靠focus 事件的侦听器，因此当您在没有加载任何数据的情况下失去对文件选择器窗口的关注时，它将以null 值完成您的未来。