如何将照片保存到 Firebase 存储并将 URL 链接发送到 Cloud Firestore？

Question

如何将照片保存到 firebase 存储并将 url 链接发送到 cloud firestore？

我正在使用图像选择器来选择图像，我的代码如下所示......

import 'package:flutter/material.dart';
import 'package:onlinecity/component/TextField/inputField.dart';
import 'package:onlinecity/component/Button/roundedButton.dart';
import 'package:onlinecity/component/Button/textButton.dart';
import 'style.dart';
import 'package:onlinecity/theme/style.dart';
import 'package:flutter/services.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
import 'package:firebase_storage/firebase_storage.dart';
import 'dart:async';

class AddOfferScreen extends StatefulWidget {


  @override
  AddOfferScreenState createState() => new AddOfferScreenState();
}

class AddOfferScreenState extends State<AddOfferScreen> {
  final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  bool _autovalidate = false;
  String _productTitle;
  String _category;
  String _contactNumber;
  FirebaseStorage storage;

  String _path;
  File _cachedFile;
  Future<File> _imageFile;
  void _onImageButtonPressed(ImageSource source) {
    setState(() {
      _imageFile = ImagePicker.pickImage(source: source);
    });

  }

  _onPressed() {
    print("button clicked");
  }

  void showInSnackBar(String value) {
    _scaffoldKey.currentState
        .showSnackBar(new SnackBar(content: new Text(value)));
  }

  bool _handleSubmitted() {
    final FormState form = _formKey.currentState;
    if (form.validate()) {
      form.save();
      return true;
    }
    return false;
  }
  void validateAndSubmit() async{
    if (_handleSubmitted()){
      try {

        Firestore.instance.collection('todos').document().setData({"productTitle":_productTitle,"category":_category,"contactNumber":_contactNumber});

      }
      catch (e){
        print('Error: $e');
      }
    }

  }

  void _showaddphoto(){
    AlertDialog dialog = new AlertDialog(
      actions: <Widget>[
        new IconButton(icon: new Icon(Icons.camera_alt), onPressed: () => _onImageButtonPressed(ImageSource.camera),
            tooltip: 'Take a Photo'),
        new IconButton(icon: new Icon(Icons.sd_storage), onPressed:  () => _onImageButtonPressed(ImageSource.gallery),
            tooltip: 'Pick Image from gallery')
      ],
    );
    showDialog(context: context,child: dialog);

  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    Size screenSize = MediaQuery.of(context).size;
    //print(context.widget.toString());
    return new Scaffold(
        key: _scaffoldKey,
        body: new SingleChildScrollView(
          child: new Container(
            padding: new EdgeInsets.all(16.0),
            decoration: new BoxDecoration(image: backgroundImage),
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                new SizedBox(
                    height: screenSize.height / 2 + 20,
                    child: new Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Text(
                          "CREATE ACCOUNT",
                          textAlign: TextAlign.center,
                          style: headingStyle,
                        )
                      ],
                    )),
                new Column(
                  children: <Widget>[
                    new Form(
                        key: _formKey,
                        autovalidate: _autovalidate,
                        //onWillPop: _warnUserAboutInvalidData,
                        child: new Column(
                          children: <Widget>[
                            new FutureBuilder<File>(
                              future: _imageFile,
                              builder: (BuildContext context, AsyncSnapshot<File> snapshot){
                                if (snapshot.connectionState == ConnectionState.done &&
                                    snapshot.data != null) {
                                  return new Image.file(snapshot.data);
                                } else if (snapshot.error != null) {
                                  return const Text('error picking image.');
                                } else {
                                  return const Text(
                                      'You have not yet picked an image.');
                                }
                              },
                            ),
                            new RaisedButton.icon(onPressed: _showaddphoto, icon: new Icon(Icons.add_a_photo), label: new Text('Add Photo')),

                            new InputField(
                              hintText: "product title",
                              obscureText: false,
                              textInputType: TextInputType.text,
                              textStyle: textStyle,
                              textFieldColor: textFieldColor,
                              icon: Icons.person_outline,
                              iconColor: Colors.white,
                              bottomMargin: 20.0,
                              validateFunction: (value)=> value.isEmpty ? 'UserName can\'t be empty' : null,
                              onSaved: (value)=> _productTitle = value,
                            ),

                            new InputField(
                              hintText: "Category",
                              obscureText: false,
                              textInputType: TextInputType.emailAddress,
                              textStyle: textStyle,
                              textFieldColor: textFieldColor,
                              icon: Icons.mail_outline,
                              iconColor: Colors.white,
                              bottomMargin: 20.0,
                              validateFunction: (value)=> value.isEmpty ? 'Email can\'t be empty' : null,
                              onSaved: (value)=> _category = value,
                            ),
                            new InputField(
                              hintText: "Contact Number",
                              obscureText: true,
                              textInputType: TextInputType.text,
                              textStyle: textStyle,
                              textFieldColor: textFieldColor,
                              icon: Icons.lock_open,
                              iconColor: Colors.white,
                              bottomMargin: 40.0,
                              validateFunction: (value)=> value.isEmpty ? 'Contact number can\'t be empty' : null,
                              onSaved:  (value)=> _contactNumber = value,
                            ),
                            new RoundedButton(
                                buttonName: "Continue",
                                onTap: validateAndSubmit,
                                width: screenSize.width,
                                height: 50.0,
                                bottomMargin: 10.0,
                                borderWidth: 1.0)
                          ],
                        )),
                    new TextButton(
                      buttonName: "Terms & Condition", onPressed: _onPressed,buttonTextStyle: buttonTextStyle,)
                  ],
                )
              ],
            ),
          ),
        ));
  }
}

Answer 1

这是一个代码 sn-p。当你有来自ImagePicker 的File 时，你应该运行它。

图像选择器：请注意 setState 不能是异步的，因此您需要在外部等待并在 setState 中将局部变量传递给字段。

  void _onImageButtonPressed(ImageSource source) async {
  File image = await ImagePicker.pickImage(source: source);
    setState(() {
      _imageFile = image;
    });

  }

这个sn-p你要上传的时候需要调用

  var fileName = "fileName.jpeg";
  StorageUploadTask putFile =
      storage.ref().child("folder/$fileName").putFile(_image);
  putFile.future.catchError(onError);

  UploadTaskSnapshot uploadSnapshot = await putFile.future;

  print("image uploaded");

  Map<String, dynamic> pictureData = new Map<String, dynamic>();
  pictureData["url"] = uploadSnapshot.downloadUrl.toString();


  DocumentReference collectionReference =
      Firestore.instance.collection("collection").document(fileName);

  await Firestore.instance.runTransaction((transaction) async {
    await transaction.set(collectionReference, pictureData);
    print("instance created");
  }).catchError(onError);