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

Posted 2023-02-23

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

【英文标题】：How to upload a specific type of file with FileUploadInputElement in Flutter for Web

【发布时间】：2019-12-23 22:34:25

【问题描述】：

我试图为 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，它不允许我上传与图像文件不同的文件（具有特定于图像的扩展名）。

【参考方案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：

【讨论】：

谢谢，这正是我要找的！