File upload Flatter web-将图像文件上载到Firebase存储

在FlatterWeb上，我从计算机中选择一个图像文件，并获得一个文件图像对象。然后我想把它上传到Firebase存储。对于Android和iOS版本的应用程序，我使用了Firebase云函数和http多部分请求。它起作用了，但对于应用程序的网络版本来说却没有。所以

---

如何直接或通过云功能将html图像文件上载到Firebase存储？

要在Flatter for Web应用程序中访问云存储，可以使用。你可以在回购协议中找到一个例子。

最后，我设法找到了这个问题的解决方案。为了实现这一点，我需要安装两个依赖项，和。 然而，很难找到解决方案，其实它的实现很简单。下面是我用来将html图像文件上传到Firebase存储的函数代码，该函数被上传到“images”文件夹中：

导入'dart:async'；
将“package:universal\u html/preference\u universal/html.dart”导入为html；
将“包：firebase/firebase.dart”作为fb导入；
未来上传的图像文件（html.File图像，
{String imageName}）异步{
fb.StorageReference storageRef=fb.storage（）.ref（'images/$imageName'）；
fb.UploadTaskSnapshot UploadTaskSnapshot=wait storageRef.put（image）.future；
Uri imageUri=Wait uploadTaskSnapshot.ref.getDownloadURL（）；
返回imageUri；
}

---

我希望它能帮助与我有同样需求的人。

以下是我上传图像的完整剪贴画：

html.File

对我不起作用，该文件已上载，但您将在firebase存储中看到加载预览时出现

错误，因此直接传递字节对我有效

要显示图像，您可以将
mediaInfo.bytes
与支持字节的小部件一起使用，例如
FadeInImage
您可以使用
MemoryImage（mediaInfo.bytes）
和
image.memory（mediaInfo.bytes）

使用的软件包：





Future imagePicker（）异步{
MediaInfo MediaInfo=等待ImagePickerWeb.getImageInfo；
返回mediaInfo；
}
未来上传文件(
MediaInfo、字符串引用、字符串文件名）异步{
试一试{
字符串mimeType=mime（Path.basename（mediaInfo.fileName））；
//html.File媒体文件=
//新的html.File（mediaInfo.data，mediaInfo.fileName，{'type'：mimeType}）；
最终字符串扩展名=extensionFromMime（mimeType）；
var metadata=fb.UploadMetadata(
contentType:mimeType，
);
fb.StorageReference存储参考=
fb.storage（）.ref（ref.child）（文件名+“$extension”）；
fb.UploadTaskSnapshot UploadTaskSnapshot=
等待storageReference.put（mediaInfo.data，metadata）.future；
Uri imageUri=Wait uploadTaskSnapshot.ref.getDownloadURL（）；
打印（“下载url$imageUri”）；
返回imageUri；
}捕获（e）{
打印（“文件上传错误$e”）；
返回null；
}
}
相关附录：如何下载：为什么这是一个如此隐藏的秘密，我不知道。多亏了

不要使Firebase存储成为依赖项，只需Firebase具有：

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

然后创建一个方法：

        Future<Uri> myDownloadURL() async {return await fb.storage().refFromURL('gs://<your storage reference>').child('$id.jpg').getDownloadURL();}

Future myDownloadURL（）异步{return wait fb.storage（）.refFromURL（'gs://'）.child（'id.jpg'）.getDownloadURL（）；}

从FutureBuilder这样的人那里称呼它：

        FutureBuilder<Uri>(
        future: myDownloadURL(),
        builder: (context, AsyncSnapshot<dynamic> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return <Something as a placeholder>;
          }
          return CircleAvatar(
            radius: backgroundRadius * 2,
            child: Image.network(snapshot.data.toString()),
          );
        },
      )

FutureBuilder(
future:myDownloadURL（），
生成器：（上下文，异步快照）{
if（snapshot.connectionState==connectionState.waiting）{
返回；
}
返回圆(
半径：背景半径*2，
子项：Image.network（snapshot.data.toString（）），
);
},
)
我认为您应该能够将Firebase云存储用于Flatter#@RenaudTarnec，这是FlatterFire插件，仅适用于Android和iOS。对于Web，使用
firebase dart
：上载成功，但未打开。标题？如何获取html.File？@shinriyo我也遇到了同样的问题，文件已损坏。我该怎么办？你让我很开心！谢谢你回答这个问题，对我有用的是用它来获得图像。然后将该图像转换为base64编码，并使用
putString
而不是像上面那样使用
put
。关于putString的更多文档无法找到，现在似乎在这里：谢谢你…你是gem