使用flutter在firebase中存储的图像不超过2张

Question

我使用了多图像拾取器，当用户选择图像时，我将图像路径存储在firebase中。通常会存储1到2个路径，但是当我发送超过2个图像的路径时，它显示了一个异常，并且没有保存图像。

下面是正在运行-的多图像拾取器的代码：

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'package:fun1/Components/Rounded_Button.dart';
import 'package:fun1/Register_Options_Screens/RecoveryEmail.dart';
import 'package:fun1/Components/FabButton.dart';
import 'package:image_picker/image_picker.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'dart:io';
import 'package:multi_image_picker/multi_image_picker.dart';
import 'dart:async';
import 'package:flutter_absolute_path/flutter_absolute_path.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';




class PhotoSelectPage extends StatefulWidget {
  @override
  _PhotoSelectPageState createState() => _PhotoSelectPageState();
}

class _PhotoSelectPageState extends State<PhotoSelectPage> {

  String selectedvalue;
  bool _isvisible = false;
  String _path;

  //==========================================================================image picker and store

  List<Asset> images = List<Asset>();
  List files = [];
  List resultList = [];

  var data;
  // List<Asset> resultList;
  String _error = 'No Error Dectected';

  @override
  void initState() {
    super.initState();
  }


  //============================================================to show image in a grid view
  Widget buildGridView() {
    if (images != null) {
      return GridView.count(
        crossAxisCount: 3,
        children: List.generate(images.length, (index) {
          Asset asset = images[index];
          print(asset.getByteData(quality: 100));
          return Padding(
            padding: EdgeInsets.all(8),
            child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              child: AssetThumb(
                asset: asset,
                width: 300,
                height: 300,
              ),
            ),
          );
        }),
      );
    }
    else{
      return Container();
    }
  }




  //============================================================to load multiple image from assets
  Future<void> loadAssets() async {
    List<Asset> resultList = List<Asset>();
    String error = 'No Error Dectected';

    try {
      resultList = await MultiImagePicker.pickImages(
        maxImages: 6,
        enableCamera: true,
        selectedAssets: images,
        cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
        materialOptions: MaterialOptions(
          actionBarColor: "#abcdef",
          actionBarTitle: "Choose Image",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),
      );
    } on Exception catch (e) {
      error = e.toString();
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      images = resultList;
      _error = error;
    });
  }


  //===============================================================convert image to file and get the path
  getImagePathFromAsset(String path) async{
    final file = File(path);
    return file;
  }


  //=============================================================get and send the file to the backend

  _submit() async {
    for (int i = 0; i < images.length; i++) {
      var path2 =
      await FlutterAbsolutePath.getAbsolutePath(images[i].identifier);
      var file = await getImagePathFromAsset(path2);
      var base64Image = base64Encode(file.readAsBytesSync());
      files.add(base64Image);
      data = {
      'files': files,
    };


      print(data);

      Navigator.pushReplacement(
          context,
          MaterialPageRoute(
              builder: (context) => RecovermailScreen()));

      FirebaseFirestore firestore = FirebaseFirestore.instance;

      var firebaseUser = FirebaseAuth.instance.currentUser;
      firestore.collection('pal').doc('111445').set(
          {
            'name' : data,
          }).then((_){
        print("success!");
      });

      // print(firebaseUser);

    }
  }



  //====================================================================================global key declaration
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      backgroundColor: Colors.deepOrange[400],
      body: Container(
        child: Padding(
          padding: EdgeInsets.only(left: 30, right: 30, top: 15),
          child: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                  

                Container(
                  height: 90,
                  child: ListView.builder(
                    itemCount: 1,
                    itemBuilder: (context, index) {
                      return Column(
                        children: [

                          buildList('Camera Roll'),
                        ],
                      );
                    },
                  ),
                ),


                images.isEmpty ? Container(height: 0,) :
                  Container(
                    height: MediaQuery.of(context).size.height/5,
                    child: buildGridView(),
                  ),


                Padding(
                  padding: EdgeInsets.only(top: 20, bottom: 20),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                  

                      images.isEmpty ? Container() :
                      FabButton(
                        icon: Icons.arrow_forward_ios_outlined,
                        Iconcolor: Colors.deepOrange,
                        onpresses: () async{
                            _submit();
                         
                        },
                      ),


                    ],
                  ),
                ),


              ],
            ),
          ),
        ),
      ),
    );
  }

}

下面是当我在数据库中发送超过2个文件路径时得到的错误。

Flutter run key commands.
h Repeat this help message.
c Clear the screen
q Quit (terminate the application on the device).
I/flutter (22073): Instance of 'Future<ByteData>'
I/flutter (22073): Instance of 'Future<ByteData>'
I/flutter (22073): {files: [/9j/4VYLRXhpZgAASUkqAAgAAAARAA4BAgAgAAAA2gAAAA8BAgAgAAAA+gAAABABAgAgAAAAGgEAABIBAwABAAAAAQAAABoBBQABAAAAOgEAABsBBQABAAAAQgEAACgB
AwABAAAAAgAAADEBAgAgAAAASgEAADIBAgAUAAAAagEAABMCAwABAAAAAgAAACACBAABAAAAAAAAACECBAABAAAAAAAAACICBAABAAAAAAAAACMCBAABAAAAAAAAACQCBAABAAAAAQAAACUCAgAgAAAAfgEA
AGmHBAABAAAAngEAAFAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEhUQwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASFRDIERlc2lyZSA3MjggZHVhbCBzaW0AAAAAAAAAAABIAAAA
AQAAAEgAAAABAAAATWVkaWFUZWsgQ2FtZXJhIEFwcGxpY2F0aW9uCgAAAAAyMDE4OjExOjA3IDIwOjQ3OjQwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHQCaggUAAQAAAAADAACdggUAAQAA
AAgDAAAiiAMAAQAAAAAAAAAniAMAAQAAAPQBAAAAkAcABAAAADAyMjADkAIAFAAAABADAAAEkAIAFAAAACQDAAABkQcABAAAAAECAwAEkgoAAQAAADgDAAAHkgMAAQAAAAIAAAAIkgMAAQAAAP8AAAAJkgMA
AQAAAAAAAAAKkgUAAQAAAEADAAB8kgcAAAIAAEgDAACQkgIAAgAAADUzAACRkgIAAgAAADUzAACSkgIAAgAAADUzAAAAoAcABAAAADAxMDABoAMAAQAAAAEAAAACoAQAAQAAAAAKAAADoAQAAQAAAKAFAAAF
oAQAAQAAAMYFAAACpAMAAQAAAAAAAAADpAMAAQAAAAAAAAAEpAUAAQAAAEgFAAAGpAMAAQAAAAAAAAAIpAMAAQAAAAAAAAAJpAMAAQAAAA
I/flutter (22073): {files: [/9j/4VYLRXhpZgAASUkqAAgAAAARAA4BAgAgAAAA2gAAAA8BAgAgAAAA+gAAABABAgAgAAAAGgEAABIBAwABAAAAAQAAABoBBQABAAAAOgEAABsBBQABAAAAQgEAACgB
AwABAAAAAgAAADEBAgAgAAAASgEAADIBAgAUAAAAagEAABMCAwABAAAAAgAAACACBAABAAAAAAAAACECBAABAAAAAAAAACICBAABAAAAAAAAACMCBAABAAAAAAAAACQCBAABAAAAAQAAACUCAgAgAAAAfgEA
AGmHBAABAAAAngEAAFAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEhUQwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASFRDIERlc2lyZSA3MjggZHVhbCBzaW0AAAAAAAAAAABIAAAA
AQAAAEgAAAABAAAATWVkaWFUZWsgQ2FtZXJhIEFwcGxpY2F0aW9uCgAAAAAyMDE4OjExOjA3IDIwOjQ3OjQwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHQCaggUAAQAAAAADAACdggUAAQAA
AAgDAAAiiAMAAQAAAAAAAAAniAMAAQAAAPQBAAAAkAcABAAAADAyMjADkAIAFAAAABADAAAEkAIAFAAAACQDAAABkQcABAAAAAECAwAEkgoAAQAAADgDAAAHkgMAAQAAAAIAAAAIkgMAAQAAAP8AAAAJkgMA
AQAAAAAAAAAKkgUAAQAAAEADAAB8kgcAAAIAAEgDAACQkgIAAgAAADUzAACRkgIAAgAAADUzAACSkgIAAgAAADUzAAAAoAcABAAAADAxMDABoAMAAQAAAAEAAAACoAQAAQAAAAAKAAADoAQAAQAAAKAFAAAF
oAQAAQAAAMYFAAACpAMAAQAAAAAAAAADpAMAAQAAAAAAAAAEpAUAAQAAAEgFAAAGpAMAAQAAAAAAAAAIpAMAAQAAAAAAAAAJpAMAAQAAAA
I/flutter (22073): {files: [/9j/4VYLRXhpZgAASUkqAAgAAAARAA4BAgAgAAAA2gAAAA8BAgAgAAAA+gAAABABAgAgAAAAGgEAABIBAwABAAAAAQAAABoBBQABAAAAOgEAABsBBQABAAAAQgEAACgB
AwABAAAAAgAAADEBAgAgAAAASgEAADIBAgAUAAAAagEAABMCAwABAAAAAgAAACACBAABAAAAAAAAACECBAABAAAAAAAAACICBAABAAAAAAAAACMCBAABAAAAAAAAACQCBAABAAAAAQAAACUCAgAgAAAAfgEA
AGmHBAABAAAAngEAAFAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEhUQwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASFRDIERlc2lyZSA3MjggZHVhbCBzaW0AAAAAAAAAAABIAAAA
AQAAAEgAAAABAAAATWVkaWFUZWsgQ2FtZXJhIEFwcGxpY2F0aW9uCgAAAAAyMDE4OjExOjA3IDIwOjQ3OjQwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHQCaggUAAQAAAAADAACdggUAAQAA
AAgDAAAiiAMAAQAAAAAAAAAniAMAAQAAAPQBAAAAkAcABAAAADAyMjADkAIAFAAAABADAAAEkAIAFAAAACQDAAABkQcABAAAAAECAwAEkgoAAQAAADgDAAAHkgMAAQAAAAIAAAAIkgMAAQAAAP8AAAAJkgMA
AQAAAAAAAAAKkgUAAQAAAEADAAB8kgcAAAIAAEgDAACQkgIAAgAAADUzAACRkgIAAgAAADUzAACSkgIAAgAAADUzAAAAoAcABAAAADAxMDABoAMAAQAAAAEAAAACoAQAAQAAAAAKAAADoAQAAQAAAKAFAAAF
oAQAAQAAAMYFAAACpAMAAQAAAAAAAAADpAMAAQAAAAAAAAAEpAUAAQAAAEgFAAAGpAMAAQAAAAAAAAAIpAMAAQAAAAAAAAAJpAMAAQAAAA
E/flutter (22073): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: [cloud_firestore/invalid-argument] Client specified an invalid argument
. Note that this differs from failed-precondition. invalid-argument indicates arguments that are problematic regardless of the state of the system (e.g., an
 invalid field name).
E/flutter (22073): #0      MethodChannelDocumentReference.set (package:cloud_firestore_platform_interface/src/method_channel/method_channel_document_referen
ce.dart:43)
E/flutter (22073): <asynchronous suspension>
E/flutter (22073): #1      _PhotoSelectPageState._submit.<anonymous closure> (package:hitch_fun1/Register_Options_Screens/PhotoSelect_Screen.dart:151)
E/flutter (22073): <asynchronous suspension>
E/flutter (22073):
E/flutter (22073): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: [cloud_firestore/invalid-argument] Client specified an invalid argument
. Note that this differs from failed-precondition. invalid-argument indicates arguments that are problematic regardless of the state of the system (e.g., an
 invalid field name).
E/flutter (22073): #0      MethodChannelDocumentReference.set (package:cloud_firestore_platform_interface/src/method_channel/method_channel_document_referen
ce.dart:43)
E/flutter (22073): <asynchronous suspension>
E/flutter (22073): #1      _PhotoSelectPageState._submit.<anonymous closure> (package:hitch_fun1/Register_Options_Screens/PhotoSelect_Screen.dart:151)
E/flutter (22073): <asynchronous suspension>
E/flutter (22073):
E/flutter (22073): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: [cloud_firestore/invalid-argument] Client specified an invalid argument
. Note that this differs from failed-precondition. invalid-argument indicates arguments that are problematic regardless of the state of the system (e.g., an
 invalid field name).
E/flutter (22073): #0      MethodChannelDocumentReference.set (package:cloud_firestore_platform_interface/src/method_channel/method_channel_document_referen
ce.dart:43)
E/flutter (22073): <asynchronous suspension>
E/flutter (22073): #1      _PhotoSelectPageState._submit.<anonymous closure> (package:hitch_fun1/Register_Options_Screens/PhotoSelect_Screen.dart:151)
E/flutter (22073): <asynchronous suspension>
E/flutter (22073):

当我被困在这里的时候，有人能引导我解决这个问题吗？谢谢。

Answer 1

我建议您使用Firebase云存储来存储您的文件，并获取文件下载url

从firebase云存储获取文件下载url后，您可以将所有url保存在一个数组中，您可以将该数组作为字符串或列表保存到firebase firestore中。

Answer 2

使用Firebase云存储来存储图像，然后获取要存储在Firebase中的URL

这里有一个你可以理解的例子

import 'dart:io';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:firebase_storage/firebase_storage.dart' as firebase_storage;
import 'package:path/path.dart' as Path;

class AddImage extends StatefulWidget {
  @override
  _AddImageState createState() => _AddImageState();
}

class _AddImageState extends State<AddImage> {
  bool uploading = false;
  double val = 0;
  CollectionReference imgRef;
  firebase_storage.Reference ref;

  List<File> _image = [];
  final picker = ImagePicker();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Add Image'),
          actions: [
            FlatButton(
                onPressed: () {
                  setState(() {
                    uploading = true;
                  });
                  uploadFile().whenComplete(() => Navigator.of(context).pop());
                },
                child: Text(
                  'upload',
                  style: TextStyle(color: Colors.white),
                ))
          ],
        ),
        body: Stack(
          children: [
            Container(
              padding: EdgeInsets.all(4),
              child: GridView.builder(
                  itemCount: _image.length + 1,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3),
                  itemBuilder: (context, index) {
                    return index == 0
                        ? Center(
                            child: IconButton(
                                icon: Icon(Icons.add),
                                onPressed: () =>
                                    !uploading ? chooseImage() : null),
                          )
                        : Container(
                            margin: EdgeInsets.all(3),
                            decoration: BoxDecoration(
                                image: DecorationImage(
                                    image: FileImage(_image[index - 1]),
                                    fit: BoxFit.cover)),
                          );
                  }),
            ),
            uploading
                ? Center(
                    child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        child: Text(
                          'uploading...',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      CircularProgressIndicator(
                        value: val,
                        valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
                      )
                    ],
                  ))
                : Container(),
          ],
        ));
  }

  chooseImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);
    setState(() {
      _image.add(File(pickedFile?.path));
    });
    if (pickedFile.path == null) retrieveLostData();
  }

  Future<void> retrieveLostData() async {
    final LostData response = await picker.getLostData();
    if (response.isEmpty) {
      return;
    }
    if (response.file != null) {
      setState(() {
        _image.add(File(response.file.path));
      });
    } else {
      print(response.file);
    }
  }

  Future uploadFile() async {
    int i = 1;

    for (var img in _image) {
      setState(() {
        val = i / _image.length;
      });
      ref = firebase_storage.FirebaseStorage.instance
          .ref()
          .child('images/${Path.basename(img.path)}');
      await ref.putFile(img).whenComplete(() async {
        await ref.getDownloadURL().then((value) {
          imgRef.add({'url': value});
          i++;
        });
      });
    }
  }

  @override
  void initState() {
    super.initState();
    imgRef = FirebaseFirestore.instance.collection('imageURLs');
  }
}