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

分类：编程问答

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

我正在尝试将图像上传到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);

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot