如何在 Firestore 集合中上传图片

Question

我有一个用户配置文件表单，我希望将配置文件图像与用户的其他信息一起存储在 Firestore 中！ 我做了存储信息的部分，但不知道如何将图像存储在同一个文档中！ 你能帮我么 ？ 我的代码只能选择图片，我没有集成将其存储在 Firestore 中的部分

const kTextFieldDecoration = InputDecoration(
  hintText: 'Enter a value',
  hintStyle: TextStyle(color: Colors.grey),
  contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
  border: OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(32.0)),
  ),
  enabledBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Color(0xff5AA7A7), width: 1.0),
    borderRadius: BorderRadius.all(Radius.circular(32.0)),
  ),
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Color(0xff5AA7A7), width: 2.0),
    borderRadius: BorderRadius.all(Radius.circular(32.0)),
  ),
);


class Background extends StatefulWidget {
   final Widget child;
   
  const Background({
    Key? key,
    required this.child,
  }) : super(key: key);
  @override
  _BackgroundState createState() => _BackgroundState();
}
class _BackgroundState extends State<Background>{
final _auth = FirebaseAuth.instance;
final _firebaseStorage = FirebaseStorage.instance ; 


uploadImage() async {
  Reference ref = _firebaseStorage.ref().child('profileimage');
  UploadTask uploadTask = ref.putFile(imageFile); 
  var imageUrl = await ( await uploadTask).ref.getDownloadURL();
  setState(() => {
     imageurl=  imageUrl.toString()
  });
}
 
  late File imageFile;
  late String name;
  late DateTime birth ; 
  late String pass ; 
  late String? genre ;
  
  TextEditingController dateinput = TextEditingController(); 
  
final List<String> genderItems = [
  'Male',
  'Female',
];
String? selectedValue;
  
  final ImagePicker _picker = ImagePicker();
  bool showSpinner = false;
 
  static final DateFormat format = DateFormat('yyyy-MM-dd');
  
  File? imagePicked;
  late Future<PickedFile?> pickedFile = Future.value(null);
  String? imageurl ; 




// Pick Image From Gallery
_getFromGallery() async {
    final picker = ImagePicker();
    final pickedImage = await picker.pickImage(
      source: ImageSource.gallery,
    );
    final pickedImageFile = File(pickedImage!.path);
    setState(() {
      imagePicked = pickedImageFile;
    });
  
}

 
  

    void addPatient() {
  FirebaseFirestore.instance.collection("patient").add(
  {
    
    "name" : name,
    "genre" : genre,
    "birth" : birth,
    "pass" : pass,
  }).then((value){
    print("Patient data Added");
    

  });
}
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    
    return Scaffold(
      resizeToAvoidBottomInset: false ,
      backgroundColor: Colors.white,
      body: ModalProgressHUD(
        inAsyncCall: showSpinner,
       child: SingleChildScrollView(   
      child: Padding(
        
         padding: EdgeInsets.symmetric(horizontal: 24.0),
         child: Column(
            
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            
        children: <Widget>[
          

          Container(
            
            child : CircleAvatar(
            radius: 70.0,
            backgroundColor: Colors.grey,
            backgroundImage: imagePicked == null
                              ? null
                              : FileImage(
                                  imagePicked!,
                                ),
          ),
            
          ),
          
          Container(
            padding: EdgeInsets.only( left: 100.0),
                child : Positioned(
                        bottom: 50.0,
                        right: 20.0, 
                        
                        child: InkWell(
                          onTap: () {
                           _getFromGallery();
                              },
                        child: Icon(
                          Icons.camera_alt_outlined, 
                          size:28.0,color: 
                          Colors.teal,
                           ),
                            ),
                 ), ),
         
               SizedBox(
                height: 25.0,
              ),
              
               
               SizedBox(
                height: 8.0,
              ),
              TextField(
                  keyboardType: TextInputType.text,
                  textAlign: TextAlign.center,
                  onChanged: (value) {
                    name = value;
                  },
                  decoration: kTextFieldDecoration.copyWith( 
                      labelText: 'Name')),
              SizedBox(
                height: 8.0,
              ),
              
              SizedBox(
                height: 8.0,
              ),
              TextField(
                  obscureText: true,
                  textAlign: TextAlign.center,
                  onChanged: (value) {
                    pass = value ;
                  },
                  decoration: kTextFieldDecoration.copyWith(
                      labelText: 'Password',)),
                      SizedBox(
                height: 8.0,
              ),
              
              SizedBox(
                height: 8.0,
              ),
             Column(
               children: [
                   DropdownButtonFormField(
              decoration: 
                //Add isDense true and zero Padding.
                //Add Horizontal padding using buttonPadding and Vertical padding by increasing buttonHeight instead of add Padding here so that The whole TextField Button become clickable, and also the dropdown menu open under The whole TextField Button.
                InputDecoration(
          
         hintStyle: TextStyle(color: Colors.grey),
         contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
         border: OutlineInputBorder(
           borderRadius: BorderRadius.all(Radius.circular(32.0)),
         ),
         enabledBorder: OutlineInputBorder(
           borderSide: BorderSide(color: Color(0xff5AA7A7), width: 1.0),
           borderRadius: BorderRadius.all(Radius.circular(32.0)),
         ),
         focusedBorder: OutlineInputBorder(
           borderSide: BorderSide(color: Color(0xff5AA7A7), width: 2.0),
           borderRadius: BorderRadius.all(Radius.circular(32.0)),
         ),
                //Add more decoration as you want here
                //Add label If you want but add hint outside the decoration to be aligned in the button perfectly.
               labelText: 'Gender',

              ), 
                 isExpanded: true,
                 
                   
                   icon: const Icon(
                Icons.arrow_drop_down,
                color: Colors.teal,
              ), 
               iconSize: 30,
              
              items: genderItems
                      .map((item) =>
                      DropdownMenuItem<String>(
                        value: item,
                        child: Text(
                          item,
                          style: const TextStyle(
                            fontSize: 14,
                          ),
                        ),
                      ))
                      .toList(),
              validator: (value) {
                if (value == null) {
                  return 'Please select gender.';
                }
              },  
               onChanged: (value) {
                genre = value as String? ; //Do something when changing the item if you want.
              },
              onSaved: (value) {
                selectedValue = value.toString();
              },
            ),   
               ],
             ), 

                      SizedBox(
                height: 8.0,),
                      
              SizedBox(
                height: 8.0,
              ),
              TextField(
                       controller: dateinput,
                       textAlign: TextAlign.center,
                       readOnly: true,
                       
                       decoration: InputDecoration( 
                     
                    hintStyle: TextStyle(color: Colors.grey),
                 contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
                 border: OutlineInputBorder(
                   borderRadius: BorderRadius.all(Radius.circular(32.0)),
                 ),
                 enabledBorder: OutlineInputBorder(
                   borderSide: BorderSide(color: Color(0xff5AA7A7), width: 1.0),
                   borderRadius: BorderRadius.all(Radius.circular(32.0)),
                 ),
                 focusedBorder: OutlineInputBorder(
                   borderSide: BorderSide(color: Color(0xff5AA7A7), width: 2.0),
                   borderRadius: BorderRadius.all(Radius.circular(32.0)),
                 ),
                    //icon of text field
                  labelText: "Date of Birth" ,  //label text of field
               
               
                ), 

                  onTap: () => BottomPicker.date(
                  
                    minDateTime: DateTime(1900), 
                       maxDateTime: DateTime.now(), 
                       dateOrder: DatePickerDateOrder.dmy , 
                       bottomPickerTheme: BOTTOM_PICKER_THEME.morningSalad,
                       closeIconColor:  Colors.teal,
                       
                  title: "Set your Birthday",
                 titleStyle: const TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15,
                    color: Colors.teal,
                 ),
                  onSubmit: (value) {
                   
                    dateinput.text = '$value'; 
                    birth = value ;
                    
                  } ,
                ).show(context),
              ),
 RoundedButton(
                colour: Color(0xff96D7C6),
                title: 'Submit',
                onPressed: () async {
                  setState(() {

                    showSpinner = true;
                    addPatient();
                  });
                  Navigator.pushNamed(context, 'patient_screen');
                }, ),],),),),),);}}

Answer 1

您可以使用 Firebase 存储 ( firebase_storage ) 上传图片文件，然后将图片的下载网址存储在 Cloud Firestore ( cloud_firestore ) 中的文档中。

这是使用Firebase Storage 和 Flutter的官方文档，您可以在其中找到一个部分解释 上传文件的步骤，另一个部分用于获取下载 URL 。