时间戳

首页 > 解决方案 > （Flutter Web）Firebase 存储无法与 firebase 插件一起使用

firebase - （Flutter Web）Firebase 存储无法与 firebase 插件一起使用

问题描述

我最近为我的一个大量使用 Firebase 服务的项目添加了 Flutter Web 支持。除了 Firebase Storage 不起作用之外，一切似乎都运行良好。我知道firebase_storage插件目前不适用于 Web，所以我尝试使用常规的firebase插件，但我无法让它工作。

我有时会收到不同的“红屏”错误，但一切都与使用 Firebase 存储的页面有关。这是红屏的一个示例：

在此处输入图像描述

以下是我之前成功使用firebase_storage的 3 个文件（Android）以及我尝试使用该firebase插件的代码。

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

// artiklar/images
final fb.StorageReference fbRefArtiklarImages =
    fb.app().storage().ref().child("artiklar").child("images");

// guider/categoryImages
final fb.StorageReference fbRefGuiderCategoryImages =
    fb.app().storage().ref().child("guider").child("categoryImages");
// guider/guideImages
final fb.StorageReference fbRefGuiderGuideImages =
    fb.app().storage().ref().child("guider").child("guideImages");

// kalender/images
final fb.StorageReference fbRefKalenderImages =
    fb.app().storage().ref().child("kalender").child("images");

// sidor/sidloggor
final fb.StorageReference fbRefSidorSidloggorImages =
    fb.app().storage().ref().child("sidor").child("sidloggor");
// sidor/sidcovers
final fb.StorageReference fbRefSidorSidcoversImages =
    fb.app().storage().ref().child("sidor").child("sidcovers");
// sidor/postImages/:sidaID/
final fb.StorageReference fbRefSidorPostImagesImages =
    fb.app().storage().ref().child("sidor").child("postImages");
// sidor/postImages/:sidaID/
final fb.StorageReference fbRefSidorKalenderImagesImages =
    fb.app().storage().ref().child("sidor").child("kalenderImages");

-

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

class StorageService {
  //STORAGE REFERENCES
  final fb.Storage _storage = fb.app().storage("gs://astoria-site.appspot.com");

  //UPLOADS IMAGE TO FIREBASE
  fb.UploadTask _uploadTask;

  Future<void> uploadStorageImage(File imageFile, String filePath) async {
    _uploadTask = _storage.ref().child(filePath).put(imageFile);
    return;
  }

  //DELETES IMAGE IN FIREBASE
  Future<void> deleteStorageImage(String filePath) async {
    try {
      await _storage.ref().child(filePath).delete();
    } catch (e) {
      print(e.toString());
    }

    return;
  }
}

-

import 'package:astoria/theme/colors.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:firebase/firebase.dart';
import 'package:flutter/material.dart';

class FirebaseStorageImage extends StatelessWidget {
  final String fileName;
  final StorageReference storageLocation;

  FirebaseStorageImage({
    @required this.fileName,
    @required this.storageLocation,
  });

  Future<String> _getImageURL() async {
    final StorageReference ref = storageLocation.child(fileName + ".jpg");

    try {
      var url = await ref.getDownloadURL();
      return url.toString();
    } catch (e) {
      return null;
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _getImageURL(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            snapshot.hasData) {
          return Image(
            image: CachedNetworkImageProvider(snapshot.data),
            fit: BoxFit.cover,
          );
        } else if (snapshot.connectionState == ConnectionState.waiting) {
          //RETURN THIS WHILE WAITING FOR IMAGE
          return Container(color: lightGreyColor);
        } else {
          //RETURN THIS IF NO IMAGE WAS FOUND AT THAT LOCATION
          return Image(
            image: AssetImage("assets/images/placeholder.png"),
            fit: BoxFit.cover,
          );
        }
      },
    );
  }
}

标签： firebaseflutterdartfirebase-storageflutter-web

解决方案

您需要将字符串传递给 ref 方法才能使其工作。为方便起见，更改ref为refFromURL，然后将您的存储桶 URL 作为字符串传递给它，如下所示；

fb.app().storage().refFromURL("YOUR BUCKET URL HERE eg: 'gs://project-ID.appspot.com'")

然后你可以放心地把剩下的方法加进去，比如；child()然后put()或putString()。祝你好运！！！

推荐阅读