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

Question

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

我已经阅读了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

你需要设置元素的accept属性（在模拟点击之前）。

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

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

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

更多详情可以在网上找到，比如w3schools：