如何将图像上传到 Firebase 存储并将图像 url 保存到 Firebase 数据库以在颤振中使用它

Question

我需要从 firebase 存储中获取图像链接并将其 url 保存到 firestore 字段， 我有一个名为 avatar(string) 的字段，头像值是来自 firebase 存储的图像链接

---

  ClipRRect(
                                      child: Image.network(snapshot.data[index].data['avatar'],
                                        height: 100,
                                        width: 170,
                                        fit: BoxFit.fill,
                                      ),
                                      borderRadius: BorderRadius.circular(20),
                                    ),

---

和错误代码

════════ Exception caught by image resource service ════════════════════════════════════════════════
The following ArgumentError was thrown resolving an image codec:
Invalid argument(s): Unsupported scheme 'gs' in URI gs://pfe-2020-51d9c.appspot.com/Ail/14118b537d_100727_bienfaits-ail.jpg

When the exception was thrown, this was the stack: 
#0      _HttpClient._openUrl (dart:_http/http_impl.dart:2278:9)
#1      _HttpClient.getUrl (dart:_http/http_impl.dart:2197:48)
#2      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:84:59)
#3      NetworkImage.load (package:flutter/src/painting/_network_image_io.dart:47:14)
#4      ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:327:17)
...
Image provider: NetworkImage("gs://pfe-2020-51d9c.appspot.com/Ail/14118b537d_100727_bienfaits-ail.jpg", scale: 1.0)
Image key: NetworkImage("gs://pfe-2020-51d9c.appspot.com/Ail/14118b537d_100727_bienfaits-ail.jpg", scale: 1.0)

════════════════════════════════════════════════ ══════════════════════════════════

Answer 1

1) 创建文件变量来保存图像：

您可以使用image_picker从手机中选择图片。

File file;

2) 创建选择图像的函数

handleChooseImageFromGallery() async {
File _file = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
  this.file = _file;
});
}

如果你想用手机摄像头拍照，可以在source中传入ImageSource.camera。

3) 将图片上传到 Firebase 存储

Future<String> handleUploadImage(imageFile) async {
// Upload imageFile to firebase storage
// TODO: use uuid for pictureId

StorageUploadTask uploadTask =
    storageRef.child("${user.id}_profilePic_$picId.jpg").putFile(imageFile);
StorageTaskSnapshot storageTaskSnapshot = await uploadTask.onComplete;
// Once the image is uploaded to firebase get the download link.
String downlaodUrl = await storageTaskSnapshot.ref.getDownloadURL();
return downlaodUrl;
}

这个函数会返回图片的url。

4)将图片网址保存在firestore文档中

void handleUpdateUserProfile()
{
    String mediaUrl = await handleUploadImage(file); // Pass your file variable 
    // Create/Update firesotre document
    usersRef.document(userId).updateData(
    {
        "avatar": mediaUrl,
    }
    );
}