如何在 Flutter for Web 中使用 FileUploadInputElement 上传特定类型的文件

Question

我试图为一个 flutter 项目创建一个简单的文件上传器，旨在将图像上传到 Firebase 存储桶，但我找不到 select 文件类型的方法。

我已经阅读了 not-so-exhaustive documentation of Dart，但我没有找到任何与我正在尝试做的相似的内容。

  static Future<Uri> showUploadDialog(
      firebase.StorageReference filePath, String fileName) async {
    Completer completer = Completer();

    InputElement uploadInput = FileUploadInputElement();
    uploadInput.click();

    uploadInput.onChange.listen(
      (changeEvent) {
        final file = uploadInput.files.first;
        final reader = FileReader();

        reader.onLoadEnd.listen(
          (loadEndEvent) async {
            debugPrint("Selected the file to be uploaded.");

            // Here we handle the file.
            completer.complete(uploadFile(file, filePath, fileName));
          },
        );

        reader.readAsDataUrl(file);
      },
    );

    return await completer.future;
  }

我的目标是能够看到一个 FileUploadInputElement，它不允许我上传不同于图像文件（具有图像特定扩展名）的文件。

Answer 1

您需要设置元素的接受属性（在模拟点击之前）。

例如，为了只接受 png 和 jpg 文件，您需要将其设置为 .png,.jpg:

InputElement uploadInput = FileUploadInputElement();
uploadInput.accept = '.png,.jpg'
uploadInput.click();

接受属性的语法是为 HTML 输入接受属性指定的语法： <input accept="file_extension|audio/*|video/*|image/*|media_type">

更多细节可以在网上找到，比如w3schools:

如何在 Flutter for Web 中使用 FileUploadInputElement 上传特定类型的文件

How to upload a specific type of file with FileUploadInputElement in Flutter for Web

flutter

dart

dart-html

dart-webui