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

Question

我試圖為 Flutter 中的項目創建一個簡單的文件上傳器，旨在將圖像上傳到 Firebase 存儲桶，但我找不到選擇文件類型的方法。

我已經閱讀了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 中：