将图像从图像选择器保存到Firebase中

莎莉亚·拉菲克(Shahryar Rafique)

我正在尝试将图像上传到Firebase存储中,并通过访问相机从图像选择器插件中获取图像。图片未上传。我还补充说,我更改了Firebase规则,因此只有经过身份验证的用户才能上传图像。Git中心回购我使用了在auth_screen.dart 第48至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.dartuser_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,
        ),
      ],
    );
  }
}

莎莉亚·拉菲克(Shahryar Rafique)

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用图像选择器将照片保存到 2 个不同的图像视图 (swift3)

来自分类Dev

将图像保存到服务器

来自分类Dev

如何将颜色选择器的值保存到mysql中

来自分类Dev

使用jQuery选择器将标签HTML保存到数组JavaScript中

来自分类Dev

从图像选择器中将图像保存在nsuserdeafult中,并获取其他视图控制器

来自分类Dev

如何将图像 url 从 Firebase Storage 保存到 Firebase 实时数据库,即我设备中的图像

来自分类Dev

Java:使用文件选择器保存DrawingBoard(JComponent)的图像。

来自分类Dev

横向图像选择器。

来自分类Dev

图像选择器iOS

来自分类Dev

将base64编码的图像保存到Firebase存储

来自分类Dev

将base64编码的图像保存到Firebase存储

来自分类Dev

如何将图像对象保存到实时 Firebase

来自分类Dev

使用GridFS将视频/图像保存到NodeJS服务器中的MongoDB中

来自分类Dev

(Vue和Firebase)我在将多个图像保存到数组中时遇到问题

来自分类Dev

图像选择器,并用颤动将它们存储到firebase中

来自分类Dev

图像选择器,并用颤动将它们存储到firebase中

来自分类Dev

流星将图像数据保存到服务器集合

来自分类Dev

将画布图像保存到服务器

来自分类Dev

Android将图像保存到PHP服务器

来自分类Dev

将图像保存到远程服务器

来自分类Dev

将画布中上传的图像保存到服务器

来自分类Dev

将阵列中的图像保存到FileManager中的文件中

来自分类Dev

将Bootstrap表单帮助器国家/地区选择器保存到我的数据库中

来自分类Dev

将选择器图像添加到fragmentTabHost

来自分类Dev

将图像保存到Qt中动态创建的目录中

来自分类Dev

Android中图库中的图像选择器

来自分类Dev

在ImageView中旋转图像并保存到服务器

来自分类Dev

如何在选择时和将图像保存到数据库之前显示图像?

来自分类Dev

在Swift中以编程方式将图像保存到xcassets

Related 相关文章

  1. 1

    使用图像选择器将照片保存到 2 个不同的图像视图 (swift3)

  2. 2

    将图像保存到服务器

  3. 3

    如何将颜色选择器的值保存到mysql中

  4. 4

    使用jQuery选择器将标签HTML保存到数组JavaScript中

  5. 5

    从图像选择器中将图像保存在nsuserdeafult中,并获取其他视图控制器

  6. 6

    如何将图像 url 从 Firebase Storage 保存到 Firebase 实时数据库,即我设备中的图像

  7. 7

    Java:使用文件选择器保存DrawingBoard(JComponent)的图像。

  8. 8

    横向图像选择器。

  9. 9

    图像选择器iOS

  10. 10

    将base64编码的图像保存到Firebase存储

  11. 11

    将base64编码的图像保存到Firebase存储

  12. 12

    如何将图像对象保存到实时 Firebase

  13. 13

    使用GridFS将视频/图像保存到NodeJS服务器中的MongoDB中

  14. 14

    (Vue和Firebase)我在将多个图像保存到数组中时遇到问题

  15. 15

    图像选择器,并用颤动将它们存储到firebase中

  16. 16

    图像选择器,并用颤动将它们存储到firebase中

  17. 17

    流星将图像数据保存到服务器集合

  18. 18

    将画布图像保存到服务器

  19. 19

    Android将图像保存到PHP服务器

  20. 20

    将图像保存到远程服务器

  21. 21

    将画布中上传的图像保存到服务器

  22. 22

    将阵列中的图像保存到FileManager中的文件中

  23. 23

    将Bootstrap表单帮助器国家/地区选择器保存到我的数据库中

  24. 24

    将选择器图像添加到fragmentTabHost

  25. 25

    将图像保存到Qt中动态创建的目录中

  26. 26

    Android中图库中的图像选择器

  27. 27

    在ImageView中旋转图像并保存到服务器

  28. 28

    如何在选择时和将图像保存到数据库之前显示图像?

  29. 29

    在Swift中以编程方式将图像保存到xcassets

热门标签

归档