将图像从图像选择器中保存到 flutter 中的 firebase 存储

Question

我正在尝试在 firebase 存储中上传图像，通过访问相机从图像选择器插件获取图像。图片未上传。我还添加了我更改了 firebase 规则，因此只有经过身份验证的用户才能上传图像。 Git 枢纽 Repo。我用的是auth_screen.dart48到59行定义的图片上传逻辑[暂时注释掉了]。当我添加这些行时，我还添加了我的其他 firebase 功能，这些功能之前是运行。收到错误。

auth_screen.dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

// import 'package:firebase_storage/firebase_storage.dart';

import 'package:flutter/services.dart';
import '../widgets/auth/auth_form.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final _auth = FirebaseAuth.instance;
  var _isLoading = false;

  void _submitAuthForm(
    String email,
    String password,
    String userName,
    File userImage,
    bool isLogin,
    BuildContext ctx,
  ) async {
    dynamic authResult;
    try {
      setState(() {
        _isLoading = true;
      });
      if (isLogin) {
        authResult = await _auth.signInWithEmailAndPassword(
          email: email,
          password: password,
        );
      } else {
        print(email);
        print(userName);
        print(userImage.path);
        authResult = await _auth.createUserWithEmailAndPassword(
          email: email,
          password: password,
        );

        // final FirebaseStorage storage = FirebaseStorage(
        //   app: FirebaseStorage.instance.app,
        //   storageBucket: 'gs://chatapp-1b780.appspot.com',
        // );

        // final StorageReference ref2 =
        //     storage.ref().child('userimage').child('${authResult.user.id}.jpg');
        // final StorageUploadTask uploadTask = ref2.putFile(userImage);
        // uploadTask.onComplete
        //     .then((value) => print(value))
        //     .catchError((error) => print(error));
        // print(uploadTask.lastSnapshot.error.toString());

        // ///...
        // final ref = FirebaseStorage.instance
        //     .ref()
        //     .child('user_image')
        //     .child(authResult.user.id + '.jpg');
        // await ref.putFile(userImage).onComplete;

        ///
        await FirebaseFirestore.instance
            .collection('users')
            .doc(authResult.user.uid)
            .set({
          'username': userName,
          'email': email,
        });
      }
    } on PlatformException catch (error) {
      var message = 'An error occured,Please check your credentials';
      if (error.message != null) {
        setState(() {
          _isLoading = false;
        });
        message = error.message;
      }
      print(message);
    } catch (error) {
      setState(() {
        _isLoading = false;
      });
      Scaffold.of(ctx).showSnackBar(
        SnackBar(
          content: Text(error.toString()),
          backgroundColor: Theme.of(ctx).errorColor,
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      body: AuthForm(_submitAuthForm, _isLoading),
    );
  }
}

使用图像选择器从 auth/auth_form.dart 到 user_image_picker.dart 中我添加了参数所以形象就流传下来了。 auth/authform.dart

import 'package:flutter/material.dart';
import 'dart:io';

import '../pickers/user_image_picker.dart';

class AuthForm extends StatefulWidget {
  final bool isLoading;
  final void Function(String email, String password, String userName,
      File userImage, bool isLogin, BuildContext ctx) submitFn;
  AuthForm(this.submitFn, this.isLoading);
  @override
  _AuthFormState createState() => _AuthFormState();
}

class _AuthFormState extends State<AuthForm> {
  final _formKey = GlobalKey<FormState>();
  var _isLogin = true;

  String _userEmail = '';
  String _userName = '';
  String _userPassword = '';
  File _userImageFile;
  void _pickedImage(File image) {
    _userImageFile = image;
  }

  void _trysubmit() {
    final isValid = _formKey.currentState.validate();
    FocusScope.of(context).unfocus();
    if (_userImageFile == null && !_isLogin) {
      Scaffold.of(context).showSnackBar(
        SnackBar(
          content: Text('Please Pick an Image'),
          backgroundColor: Theme.of(context).errorColor,
        ),
      );
      return;
    }
    if (isValid) {
      _formKey.currentState.save();
      print(_userEmail);
      print(_userPassword);
      widget.submitFn(_userEmail.trim(), _userPassword.trim(), _userName.trim(),
          _userImageFile, _isLogin, context);
      print(_userEmail);
      print(_userPassword);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        margin: EdgeInsets.all(20),
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Form(
              key: _formKey,
              child: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    if (!_isLogin)
                      UserImagePicker(
                        imagePickFn: _pickedImage,
                        
                      ),
                    TextFormField(
                      key: ValueKey('emailAdress'),
                      keyboardType: TextInputType.emailAddress,
                      decoration: InputDecoration(
                        labelText: 'Email address',
                      ),
                      validator: (value) {
                        if (value.isEmpty || !value.contains('@')) {
                          return 'Please return a valid email address';
                        }
                        return null;
                      },
                      onSaved: (newValue) {
                        _userEmail = newValue;
                      },
                    ),
                    if (!_isLogin)
                      TextFormField(
                        key: ValueKey('userName'),
                        decoration: InputDecoration(labelText: 'Username'),
                        validator: (value) {
                          if (value.isEmpty || value.length < 4) {
                            return 'Please Enter at least 4 characters';
                          }
                          return null;
                        },
                        onSaved: (newValue) {
                          _userName = newValue;
                        },
                      ),
                    TextFormField(
                      key: ValueKey('password'),
                      decoration: InputDecoration(labelText: 'Password'),
                      obscureText: true,
                      validator: (value) {
                        if (value.isEmpty || value.length < 7) {
                          return 'Please Enter at least 7 characters';
                        }
                        return null;
                      },
                      onSaved: (newValue) {
                        _userPassword = newValue;
                      },
                    ),
                    SizedBox(
                      height: 12,
                    ),
                    if (widget.isLoading) CircularProgressIndicator(),
                    if (!widget.isLoading)
                      RaisedButton(
                        onPressed: _trysubmit,
                        child: Text((_isLogin) ? 'Login' : 'SignUp'),
                      ),
                    if (!widget.isLoading)
                      FlatButton(
                        textColor: Theme.of(context).primaryColor,
                        child: Text(_isLogin
                            ? 'Create new account'
                            : 'I already have an account'),
                        onPressed: () {
                          setState(() {
                            _isLogin = !_isLogin;
                          });
                        },
                      ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

user_image_picker.dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class UserImagePicker extends StatefulWidget {
  UserImagePicker({this.imagePickFn});
  final void Function(File pickedImage) imagePickFn;
  @override
  _UserImagePickerState createState() => _UserImagePickerState();
}

class _UserImagePickerState extends State<UserImagePicker> {
  File _image;
  final picker = ImagePicker();

  Future<void> getImage() async {
    final pickedFile = await ImagePicker().getImage(source: ImageSource.camera);

    setState(() {
      _image = File(pickedFile.path);
    });
    widget.imagePickFn(_image);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CircleAvatar(
          radius: 40,
          backgroundColor: Colors.grey,
          backgroundImage: _image != null ? FileImage(_image) : null,
        ),
        FlatButton.icon(
          onPressed: getImage,
          icon: Icon(Icons.image),
          label: Text('Add Image'),
          textColor: Theme.of(context).primaryColor,
        ),
      ],
    );
  }
}

Answer 1

既然你要我向你展示如何将图片上传到 Firebase Storage，我将向你展示整个过程，包括使用 Image Picker 插件。这是您应该如何使用图像选择器：

class PickMyImage{
static Future<File> getImage() async {
    final image = await ImagePicker().getImage(
      source: ImageSource.gallery,
      maxHeight: 1500,
      maxWidth: 1500,
    );
    if (image != null) {
      return File(image.path);
    }
    return null;
  }
  }

这是获取图像并将其上传到 firebase 存储的方法：

   final File _myImage=await PickMyImage.getImage();
   if(_myImage!=null){
      final StorageReference firebaseStorageRef = FirebaseStorage.instance
          .ref()
          .child("user/${_auth.currentUser().uid}/i"); //i is the name of the image
      StorageUploadTask uploadTask =
          firebaseStorageRef.putFile(_myImage);
      StorageTaskSnapshot storageSnapshot = await uploadTask.onComplete;
      var downloadUrl = await storageSnapshot.ref.getDownloadURL();
      if (uploadTask.isComplete) {
        final String url = downloadUrl.toString();
        print(url);
        //You might want to set this as the _auth.currentUser().photourl
      } else {
        //error uploading
      }
    }

Answer 2

我遇到这个问题是因为我要返回文件的 ImagePicker() 函数，然后从相机获取图像，然后将文件传递到 Fire Storage 存储桶。在user_image_picker.dart 我写了这个 final pickedFile = await ImagePicker().getImage(source: ImageSource.camera); 而不是我必须写这个 final pickedFile = await picker.getImage(source: ImageSource.camera);

将图像从图像选择器中保存到 flutter 中的 firebase 存储

Save Image from Image picker to firebase Storage in flutter

future

firebase

flutter

firebase-storage

imagepicker