Flutter web 类型 File 被定义为多个类

Question

我有一个 Flutter 网络项目，我想从设备中 select 图片并将其上传到 Firebase 存储。我找到了这个解决方案：

Future<void> uploadToFirebase(File imageFile) async { //I get the error here
    final filePath = 'images/${DateTime.now()}.png';
    StorageTaskSnapshot snapshot = await FirebaseStorage.instance
        .ref()
        .child(filePath)
        .putFile(imageFile)
        .onComplete;
    print("UploadToFirebase");
    if (snapshot.error == null) {
      final String downloadUrl = await snapshot.ref.getDownloadURL();
      await Firestore.instance
          .collection("images")
          .add({"url": downloadUrl, "name": "${DateTime.now()}.png"});
    } else {
      print('Error from image repo ${snapshot.error.toString()}');
      throw ('This file is not an image');
    }
  }

void uploadImage() async {
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.click();
    uploadInput.onChange.listen(
      (changeEvent) {
        final file = uploadInput.files.first;
        final reader = FileReader();

        reader.readAsDataUrl(file);
        reader.onLoadEnd.listen(
          (loadEndEvent) async {
            print("Calling uploadToFirebase");
            uploadToFirebase(file);
            print("Done");
          },
        );
      },
    );
  }

但是这段代码在注释的那一行有如下错误：

名称 'File' 在库 'dart:html' 和 'dart:io' 中定义。尝试对其中一个导入指令使用 'as prefix'，或者对 imports.dartambiguous_import

以外的所有指令隐藏名称

在此之后我在我的导入飞镖中添加了一个 hide html:

import 'dart:html' hide File;

然而，这导致了 uploadImage 函数中的另一个错误，我在其中调用了 uploadToFirebase(file)：参数类型 'File (where File is defined in

C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\html\html_dart2js.dart)' 无法分配给参数类型 'File (where File is defined in C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\io\file.dart)'.dartargument_type_not_assignable html_dart2js.dart(15975, 7): 文件定义在 C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\html\html_dart2js.dart file.dart(241, 16): 文件定义在C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\io\file.dart

我的index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="12 órás eventek kezelésére">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="event_maker">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>event_maker</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->

  <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-firestore.js"></script>

<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-analytics.js"></script>
</script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    ...
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>     
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

关于如何解决这个问题还有其他想法吗？或者有没有更好的方法来使用网络应用程序上传文件？
我是 Flutter 的初学者，很抱歉，如果这是一个愚蠢的问题。提前感谢您的帮助！

Answer 1

我认为您缺少 Firebase 存储。尝试添加以下行：

<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-storage.js"></script>

Answer 2

dart:html 'File' extends Blob <-如果从网络上传则使用这个

dart:io 'File' extends FileSystemEntity <-如果从具有文件访问权限的平台上传，请使用此选项

你的情况使用 .putBlob(imageFile) 而不是 .putFile(imageFile)

Flutter web 类型 File 被定义为多个类

Flutter web the type File is defined in multiple classes

image

firebase

flutter

firebase-storage

flutter-web

Flutter web 类型 File 被定义为多个 类

Flutter web the type File is defined in multiple classes

image

firebase

flutter

firebase-storage

flutter-web

Flutter web 类型 File 被定义为多个类