Flutter web 上传文件取消事件答案

【问题标题】：Flutter web upload file cancel eventFlutter web 上传文件取消事件
【发布时间】：2021-03-20 04:26:21
【问题描述】：

我在 Flutter 中开发了一个 Web 应用程序，我想从文件系统加载一个文件。为此，我使用以下代码：

static Future<Uint8List> chooseImage(dynamic parent, dynamic provider) async {
  Uint8List uploadedImage;
  final completer = Completer<List<String>>();
  InputElement uploadInput = FileUploadInputElement();
  uploadInput.accept = 'image/*';
  uploadInput.click();
  uploadInput.addEventListener('change', (e) async {
    final files = uploadInput.files;
    Iterable<Future<String>> resultsFutures = files.map((file) {
      final reader = FileReader();
      reader.readAsDataUrl(file);
      reader.onError.listen((error) => completer.completeError(error));
      return reader.onLoad.first.then((_) async {
        String result = reader.result as String;
        uploadedImage = base64Decode(result.substring(22, result.length));
        return reader.result as String;
      });
    });

    final results = await Future.wait(resultsFutures);
    completer.complete(results);
  });
  document.body.append(uploadInput);
  final List<String> images = await completer.future;
  parent.setState(() {
    parent.pickedImage = uploadedImage;
  });
  uploadInput.remove();
  return uploadedImage;
}

在我的应用程序中，当用户在此弹出窗口中按下“取消”按钮时，我需要处理这种情况：

我添加了以下监听器：onFocus、onSuspen、onSubmit、onEnded、onAbort，但是当按下取消按钮时，这些事件都不会被触发。

如何处理弹出取消？

【问题讨论】：

没有处理取消事件的选项
一般情况下没有选项可以处理取消事件，或者只针对 dart:html 中的 InputElement？
是的，没有一般的取消事件。可以找到很多替代选项here

标签： flutter dart event-handling flutter-web dart-html

【解决方案1】：

I've already answered to a similar question here

您已经可以在 file_picker 包的 Web 实现中找到管理此类事件的方法。

因为取决于您使用的浏览器，取消事件的管理方式可能不同，所以最通用的解决方案是依赖窗口中focus 事件的侦听器，这样当您失去对文件选择器窗口的关注时在没有加载任何数据的情况下，它将以null 值完成您的未来。

代码示例

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;
}

来源

file_picker implementation

【讨论】：