无法使用 Flutter Web 的 image_picker 将文件上传到 Firebase 存储

Posted 2023-02-23

【中文标题】无法使用 Flutter Web 的 image_picker 将文件上传到 Firebase 存储

【英文标题】：Unable to upload file to Firebase Storage using Flutter Web's image_picker

【发布时间】：2020-11-20 18:18:41

【问题描述】：

我正在使用颤振网络。我正在尝试使用 image_picker 上传图像并存储在 firebase 存储中。 image_picker 返回 PickedFile 类型。因此，我使用 File image = File(pickedFile.path) 将其转换为文件类型，然后使用 ref.putFile(image) 上传。但是文件没有上传。我得到一个命名空间异常。有什么想法吗？

PickedFile pickedFile =
          await picker.getImage(source: ImageSource.gallery);

      File newFile = File(pickedFile.path);
      var now = DateTime.now().millisecondsSinceEpoch;
      StorageReference reference =
          FirebaseStorage.instance.ref().child("images/$now");
      StorageUploadTask uploadTask = reference.putFile(newFile);
      //Upload the file to firebase

      StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;

      // Waits till the file is uploaded then stores the download url
      String url = await taskSnapshot.ref.getDownloadURL();

我得到的错误是

Error: Unsupported operation: _Namespace
    at Object.throw_ [as throw] (http://localhost:64148/dart_sdk.js:4322:11)
    at Function.get _namespace [as _namespace] (http://localhost:64148/dart_sdk.js:54027:17)
    at io._File.new.existsSync (http://localhost:64148/dart_sdk.js:51618:51)
    at firebase_storage.StorageReference.__.putFile (http://localhost:64148/packages/firebase_storage/firebase_storage.dart.lib.js:701:27)
    at add_product$46view._AddProductPageState.new.loadAssets (http://localhost:64148/packages/ecommerce_glasses/product/views/add_product.view.dart.lib.js:1234:38)
    at loadAssets.next (<anonymous>)
    at http://localhost:64148/dart_sdk.js:37211:33
    at _RootZone.runUnary (http://localhost:64148/dart_sdk.js:37065:58)
    at _FutureListener.thenAwait.handleValue (http://localhost:64148/dart_sdk.js:32049:29)
    at handleValueCallback (http://localhost:64148/dart_sdk.js:32596:49)
    at Function._propagateToListeners (http://localhost:64148/dart_sdk.js:32634:17)
    at _Future.new.[_completeWithValue] (http://localhost:64148/dart_sdk.js:32477:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:64148/dart_sdk.js:32499:35)
    at Object._microtaskLoop (http://localhost:64148/dart_sdk.js:37326:13)
    at _startMicrotaskLoop (http://localhost:64148/dart_sdk.js:37332:13)
    at http://localhost:64148/dart_sdk.js:32851:9

【参考方案1】：

您无权访问 Flutter web 中的文件路径。

您需要将文件上传为字节，而不是尝试从路径上传文件。

你可以使用这个Uint8List获取文件，

final fileBytes = pickedFile.readAsBytes();

而在你的存储代码中，你可以把数据改为，

reference.putData(fileBytes);

所以，你的代码应该是这样的

PickedFile pickedFile =
          await picker.getImage(source: ImageSource.gallery);

final fileBytes = pickedFile.readAsBytes();
var now = DateTime.now().millisecondsSinceEpoch;
StorageReference reference =
  FirebaseStorage.instance.ref().child("images/$now");

StorageUploadTask uploadTask = reference.putData(fileBytes);

//Upload the file to firebase
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;

// Waits till the file is uploaded then stores the download url
String url = await taskSnapshot.ref.getDownloadURL();

【参考方案2】：

在 index.html 中添加这个脚本

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

这就是我的做法

// ignore: avoid_web_libraries_in_flutter
import 'dart:html' as html;

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase/firebase.dart' as fb;

Future<Uri> _uploadImageFile(
  @required html.File image,
  @required String imageName,
) async 
fb.StorageReference storageRef = fb.storage().ref('category/$imageName');
fb.UploadTaskSnapshot uploadTaskSnapshot =
    await storageRef.put(image).future;

 Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
 return imageUri;

【讨论】：

我正在使用这个包 image_picker_web: ^1.0.9

【参考方案3】：

你不能在 Flutter web 中使用File newFile = File(pickedFile.path);。我不知道 Firebase API 是如何工作的，但您可能必须使用 pickedFile.readAsBytes()。