Question

我看到有很多关于如何使用flutter将图像上传到firebase存储的示例，但实际下载/读取/显示已经上传的图像没有任何内容。

在Android中，我只是使用Glide来显示图像，我如何在Flutter中这样做？我是否使用NetworkImage类，如果是，我如何首先获取存储在存储中的图像的网址？

Answer 1

<强>更新

在较新的版本中使用

await ref.getDownloadURL();

请参阅How to get full downloadUrl from UploadTaskSnapshot in Flutter?

<强>原始

<击>

someMethod() async {
  var data = await FirebaseStorage.instance.ref().child("foo$rand.txt").getData();
  var text = new String.fromCharCodes(data);
  print(data);
}

请参阅Download an image from Firebase to Flutter

或

final uploadTask = imageStore.putFile(imageFile);
final url = (await uploadTask.future).downloadUrl;

在后一种情况下，您需要将downloadUrl存储在某处，然后使用NetworkImage或类似内容进行渲染。

<击>

Answer 2

要查看存储器中的图像，您需要的是存储器中文件的名称。获得所需特定图像的文件名后。就我而言，如果我想加载测试图像，

final ref = FirebaseStorage.instance.ref().child('testimage');
// no need of the file extension, the name will do fine.
var url = await ref.getDownloadURL();
print(url);

输入网址后，

Image.network(url);

仅此而已：）

Answer 3

这是一个有状态小部件的示例，该小部件从Firebase存储对象加载图像并构建一个Image对象：

class _MyHomePageState extends State<MyHomePage> {

  final FirebaseStorage storage = FirebaseStorage(
      app: Firestore.instance.app,
      storageBucket: 'gs://my-project.appspot.com');

  Uint8List imageBytes;
  String errorMsg;

  _MyHomePageState() {
      storage.ref().child('selfies/me2.jpg').getData(10000000).then((data) =>
                setState(() {
                  imageBytes = data;
                })
        ).catchError((e) =>
                setState(() {
                  errorMsg = e.error;
                })
        );
  }

  @override
  Widget build(BuildContext context) {
    var img = imageBytes != null ? Image.memory(
        imageBytes,
        fit: BoxFit.cover,
      ) : Text(errorMsg != null ? errorMsg : "Loading...");

    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new ListView(
          children: <Widget>[
            img,
          ],
        ));
  }
}

请注意，FirebaseApp类由Firestore类处理，因此不需要进一步的初始化代码。

Answer 4

您可以在firebase控制台中打开文件，然后复制存储位置URL （右下），然后在您的Flutter应用中，您可以执行以下操作。

    Future _getImageUrl() async {
      final Future<StorageReference> ref =
          FirebaseStorage.instance.getReferenceFromUrl('gs://...');
      dynamic url = await ref.then((doc) => doc.getDownloadURL());
      print(url);
    }

来自Firebase存储的颤动加载图像

4 个答案: