将图像从图像选择器保存到Firebase中的抖动存储

编程问答 2022-08-14

问题描述

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

        // 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,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,);
  }
}

解决方法

由于您要我告诉您如何将图像上传到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
      }
    }
,

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

firebasefirebase-storagefutureimagepicker

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...