无法将用户的个人资料图片添加到 Cloud Storage for Firebase答案

【问题标题】：Adding a profile picture for users to Cloud Storage for Firebase is not working无法将用户的个人资料图片添加到 Cloud Storage for Firebase
【发布时间】：2021-08-26 11:15:21
【问题描述】：

这有一个简单的 UI，带有一个 circleAvatar 和一个文本按钮。 onPressing texxt 按钮它应该打开 ImagePicker 并将所选图片上传到 firebase 并显示它在 circleAvatar 中的图像，但它不起作用，ImagePicker 工作正常但在 circleAvatar 和 Firestore 中没有显示图片。请求助，这里可以使用其他逻辑吗？

import 'package:flutter/material.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:image_picker/image_picker.dart';
class MyProfilePage extends StatefulWidget {
@override
  _MyProfilePageState createState() => _MyProfilePageState();
}

class _MyProfilePageState extends State<MyProfilePage> {
  String imageLink;
  File _image;

 @override
 Widget build(BuildContext context) {
  return Scaffold(
     body: Container(
   width: double.infinity,
   child: Column(
    children: <Widget>[
      SizedBox(
        height: 64,
      ), //just for spacing

      imageLink != null
          ? CircleAvatar(
              child: ClipOval(
                child: Image.network(imageLink),
              ),
              radius: 100,
            )
          : CircleAvatar(
              child: ClipOval(
                child: Icon(
                  Icons.person,
                  size: 100,
                ),
              ),
              radius: 100,
            ),

      SizedBox(
        height: 16,
      ), //just for spacing

      TextButton(
        style: TextButton.styleFrom(backgroundColor: Colors.blueGrey),
        child: Text("Change Image", style: TextStyle(color: Colors.yellow)),
        onPressed: () async {
          _image = (await ImagePicker()
              .getImage(source: ImageSource.gallery)) as File;
          FirebaseStorage fireStore = FirebaseStorage.instance;

          Reference rootRef = fireStore.ref();
          Reference pictureRef = rootRef.child("ProfilePictures");

          pictureRef.putFile(_image).then((storageTask) async {
            String link = await storageTask.ref.getDownloadURL();
            print('Uploaded');
            setState(() {
              imageLink = link;
            });
          });
        },
      )
    ],
  ),
));

} }

【问题讨论】：

如果对您有用，请选择已接受的答案

标签： flutter dart firebase-storage

【解决方案1】：

试试这个

onPressed: () async {
   final pickedFile = await ImagePicker()
          .getImage(source: ImageSource.gallery);
   _image = File(pickedFile.path);


   final pictureRef = FirebaseStorage.instance
                      .ref()
                      .child("folder_name")
                      .child("file_name.jpg");

   await pictureRef.putFile(_image).whenComplete(() => null);

   final String link = await pictureRef.getDownloadURL();
        
   print('Uploaded');
        
   setState(() {
          imageLink = link;
        });

}

【讨论】：

【解决方案2】：

试试下面的代码

HTML代码

 <input
  type="file"
  accept="image"
  @change="detectFiles($event.target.files)"
/>

JS 代码

downloadURL = ""; 

detectFiles(file) {
    user = firebase.auth().currentUser;
    const storage = firebase.storage();
    this.uploadTask = storage
      .ref(`USER_NAME-profilePic`)
      .put(file[0])
      .then((res) => {
        res.task.snapshot.ref.getDownloadURL().then((downloadURL: string) => {
          this.downloadURL = downloadURL;
        });
      });
  }

另外，导入 firebase

import firebase from "firebase";

【讨论】：

【解决方案3】：

试试这个

 FirebaseStorage storage = FirebaseStorage.instance; //create storage instance

 // pass user id and image file
 Future<String> uploadImage(String id,File file) async {
    var reference =
       storage.ref().child("profileImages/$id"); //it will create folder for profileImages
    UploadTask uploadTask = reference.putFile(file);
   TaskSnapshot taskSnapshot = await uploadTask.whenComplete(() => null); //this will upload image
  String url = await taskSnapshot.ref.getDownloadURL(); // from there you will get image url.
  return url;
}

【讨论】：