اذهب إلى المحتوى
  • 0

مشكلة تكرار الملفات المرفوعه في قاعدة البيانات flutter

Flutter Dev

السؤال

السلام عليكم ورحمة الله وبركاته

تحيه طيبه للجميع

قمت بعمل كود يجلب الصور من الاستوديو للمستخدم ثم يستطيع المستخدم رفعها الى قاعدة البيانات mysql  من خلال تطبيق فلاتر

الكود شغال تمام ولكن توجد مشكله واحده في حالة قمت بتحميل صوره واحده الكود شغال كويس ولكن لو قمت باختيار مثلا صورتان او اكثر وقمت برفعها الى قاعدة البيانات يتم تكرار الاسم في قاعدة البيانات او تكرار الحقول اكثر من عدد الصور المرفوعه 

مثال انا قمت بتجربة تحميل صورتان 

وهذا النتيجة التي حصلت عليها :

6099ddbb54a80_2021-05-11050147.png.c1d3d8e5aac5fdab92f47cda09a5be34.png

 

تقريبا 6 اسطر والمتفرض يكون فقط اثنان

واحصل ذلك على الخطاء التالي في الاندرويد ستوديو :

Performing hot reload...
Syncing files to device SM G955F...
Reloaded 1 of 613 libraries in 963ms.
D/ViewRootImpl@eb7fe80[MainActivity]( 7240): ViewPostIme pointer 0
D/ViewRootImpl@eb7fe80[MainActivity]( 7240): ViewPostIme pointer 1
I/flutter ( 7240): dddddddddddddddd 200
I/flutter ( 7240): dddddddddddddddd 200
I/flutter ( 7240): dddddddddddddddd 200
I/flutter ( 7240): dddddddddddddddd 200
I/flutter ( 7240): dddddddddddddddd 200
I/flutter ( 7240): dddddddddddddddd 200
E/flutter ( 7240): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: RangeError (index): Invalid value: Not in inclusive range 0..5: 6
E/flutter ( 7240): #0      List.[] (dart:core-patch/growable_array.dart:177:60)
E/flutter ( 7240): #1      _PickImagesState.startUpload (package:multiiamge/testpage.dart:91:27)
E/flutter ( 7240): <asynchronous suspension>
E/flutter ( 7240): #2      _PickImagesState.build.<anonymous closure> (package:multiiamge/testpage.dart:218:15)
E/flutter ( 7240): #3      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:993:19)
E/flutter ( 7240): #4      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:1111:38)
E/flutter ( 7240): #5      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:183:24)
E/flutter ( 7240): #6      TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:598:11)
E/flutter ( 7240): #7      BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:287:5)
E/flutter ( 7240): #8      BaseTapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:222:7)
E/flutter ( 7240): #9      PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:476:9)
E/flutter ( 7240): #10     PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:77:12)
E/flutter ( 7240): #11     PointerRouter._dispatchEventToRoutes.<anonymous closure> (package:flutter/src/gestures/pointer_router.dart:122:9)
E/flutter ( 7240): #12     _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:377:8)
E/flutter ( 7240): #13     PointerRouter._dispatchEventToRoutes (package:flutter/src/gestures/pointer_router.dart:120:18)
E/flutter ( 7240): #14     PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:106:7)
E/flutter ( 7240): #15     GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:358:19)
E/flutter ( 7240): #16     GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:338:22)
E/flutter ( 7240): #17     RendererBinding.dispatchEvent (package:flutter/src/rendering/binding.dart:267:11)
E/flutter ( 7240): #18     GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:295:7)
E/flutter ( 7240): #19     GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:240:7)
E/flutter ( 7240): #20     GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:213:7)
E/flutter ( 7240): #21     _rootRunUnary (dart:async/zone.dart:1206:13)
E/flutter ( 7240): #22     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
E/flutter ( 7240): #23     _CustomZone.runUnaryGuarded (dart:async/zone.dart:1005:7)
E/flutter ( 7240): #24     _invoke1 (dart:ui/hooks.dart:265:10)
E/flutter ( 7240): #25     _dispatchPointerDataPacket (dart:ui/hooks.dart:174:5)
E/flutter ( 7240): 

 

 

الكود كامل كالتالي:




void main() {
  runApp(
    MyApp(),

  );
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: PickImages(),
    );
  }
}
class PickImages extends StatefulWidget {
  @override
  _PickImagesState createState() => _PickImagesState();
}

class _PickImagesState extends State<PickImages> {
  static final String uploadEndPoint = 'https://******************.php';
  List<Object> images = List<Object>();
  Future<File> _imageFile;
  bool _isVisible = false;
  String base64Image;
  List imagecode=[];
  List name=[];
  Future _onAddImageClick(int index, int type) async {
    if (images != null)
      setState(() {
        // ignore: deprecated_member_use
        _imageFile = ImagePicker.pickImage(
          source: type == 1 ? ImageSource.camera : ImageSource.gallery,
          imageQuality: 50,
        );
        getFileImage(index);
      });
  }

  void getFileImage(int index) async {
    _imageFile.then((file) async {
      setState(() {
        ImageUploadModel imageUpload = new ImageUploadModel();
        imageUpload.imageFile = file;
        images.replaceRange(index, index + 1, [imageUpload]);
      });
    });
  }

  void showImageBox() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }

  @override
  void initState() {
    super.initState();
    setState(() {
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
    });
  }


  startUpload() async{
    String NameImage = DateTime.now().millisecondsSinceEpoch.toString();
    {for(int i=0;i<=imagecode.length;i++){
      await http.post(uploadEndPoint, body: {
        "image": imagecode[i],
        "NameImage": name[i],

      }).then((result) {
        if (result.statusCode == 200) {
          print('dddddddddddddddd ${result.statusCode}');
        } else {

        }
      });
    }}
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Post Images'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            //padding: EdgeInsets.only(right: 5),
            child: Card(
              elevation: 5,
              child: ListTile(
                trailing: Icon(Icons.attachment),
                title: Text('Attachments'),
                onTap: () {
                  showImageBox();
                },
              ),
            ),
          ),
          Visibility(
            visible: _isVisible,
            child: Padding(
              padding: const EdgeInsets.only(top: 5.0, right: 5.0),
              child: GridView.count(
                shrinkWrap: true,
                crossAxisCount: 3,
                childAspectRatio: 1,
                children: List.generate(images.length, (index) {
                  if (images[index] is ImageUploadModel) {
                    ImageUploadModel uploadModel = images[index];
                    //base64 image
                    List<int> imageBytes = uploadModel.imageFile.readAsBytesSync();
                    // base64Image = base64Encode(snapshot.data.readAsBytesSync());
                    base64Image = base64Encode(imageBytes); //'base64Image' holds the base64 image string
                    imagecode.add(base64Image);
                    name.add(uploadModel.imageFile.path.split("/").last);
                    return Card(
                      clipBehavior: Clip.antiAlias,
                      child: Stack(
                        children: <Widget>[
                          Image.file(
                            uploadModel.imageFile,
                            fit: BoxFit.cover,
                            width: 300,
                            height: 300,
                          ),
                          Positioned(
                            right: 5,
                            top: 5,
                            child: InkWell(
                              child: Icon(
                                Icons.remove_circle,
                                size: 20,
                                color: Colors.red,
                              ),
                              onTap: () {
                                setState(() {
                                  images.replaceRange(
                                      index, index + 1, ['Add Image']);
                                });
                              },
                            ),
                          ),

                        ],
                      ),
                    );
                  } else {
                    return Card(
                      child: IconButton(
                        icon: Icon(Icons.camera_alt),
                        onPressed: () {
                          showModalBottomSheet(
                            context: context,
                            builder: (BuildContext context) {
                              return SafeArea(
                                child: Container(
                                  child: new Wrap(
                                    children: <Widget>[
                                      new ListTile(
                                        leading: new Icon(Icons.photo_camera),
                                        title: new Text('Camera'),
                                        onTap: () {
                                          _onAddImageClick(index, 1);
                                          Navigator.of(context).pop();
                                        },
                                      ),
                                      new ListTile(
                                          leading:
                                          new Icon(Icons.photo_library),
                                          title: new Text('Gallery'),
                                          onTap: () {
                                            _onAddImageClick(index, 2);
                                            Navigator.of(context).pop();
                                          }),
                                    ],
                                  ),
                                ),
                              );
                            },
                          );
                        },
                      ),
                    );
                  }
                }),
              ),
            ),
          ),
          RaisedButton(
            child: Text('send'),
            onPressed: () {
              startUpload();
            },
          ),
        ],
      ),
    );
  }
}

class ImageUploadModel {
  File imageFile;

  ImageUploadModel({
    this.imageFile,
  });
}

 

 

ياليت اذا احد يعرف شو السبب يفيدنا بطريقة الحل لها 

شكرا لكم

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1
بتاريخ 10 ساعات قال مروان مروان3:

من يومين وانا احاول فيه ولكن بدون فائدة انا عارف انه المشكلة في حلقة for ولكن بسبب نقص الخبره لم اعرف كيف ممكن اضبطها 

سنعمل على حساب عدد الصور التي تم تحديدها، أي استدعاء الدالة _onAddImageClick حسب فهمي للشيفرة فاستدعائها يتكرر مع كل تحديد للصورة.

يمكنك تعريف متغير قبل الدالة، وعلينا زيادته ب 1 بعد كل استدعاء أي:

var _imageCounter = 0;
^^^^^^^^^^^^^^^^^^

Future _onAddImageClick(int index, int type) async {
	
    if (images != null)
      setState(() {
	
		_imageCounter ++;
 ______^^^^^^^^^^^^^^^^

        // ignore: deprecated_member_use
        _imageFile = ImagePicker.pickImage(
          source: type == 1 ? ImageSource.camera : ImageSource.gallery,
          imageQuality: 50,
        );
        getFileImage(index);
      });
  }

وفي الحلقة:

for(int i=0;i <  _imageCounter ;i++)
              ^  ^^^^^^^^^^^^^

أصغر تماما لكي لا نجلب صورة إضافية

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

سبب رفع 6 صور، بسبب تهيئة قائمة الصور ب6 عناصر في هذه الجزئية:

void initState() {
    super.initState();
    setState(() {
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
    });
  }

ثم تقوم بالمرور عليهم بحلقة for وتنفذ الشيفرة فتتكرر العملية عدة مرات

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ الآن قال Wael Aljamal:

سبب رفع 6 صور، بسبب تهيئة قائمة الصور ب6 عناصر في هذه الجزئية:


void initState() {
    super.initState();
    setState(() {
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
    });
  }

ثم تقوم بالمرور عليهم بحلقة for وتنفذ الشيفرة فتتكرر العملية عدة مرات

اهلا بيك اخي

شاكر لك ردك وافادتك ولكن اخي كيف يمكن تجنب هذا المشكله ؟ بحيث اني انا مخلي للمستخدم بالاساس 6 خيارات ما اريد اقلل يعني كيف يمكن تجنب هذا المشكله؟ بحيث لو كان مافيه صور او المستخدم ما كمل اختيار باقي الحقول لا يتم تكرار الامر؟ هل لديك فكره لو تكرمت

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 ساعات قال مروان مروان3:

شاكر لك ردك وافادتك ولكن اخي كيف يمكن تجنب هذا المشكله ؟ بحيث اني انا مخلي للمستخدم بالاساس 6 خيارات ما اريد اقلل يعني كيف يمكن تجنب هذا المشكله؟ بحيث لو كان مافيه صور او المستخدم ما كمل اختيار باقي الحقول لا يتم تكرار الامر؟ هل لديك فكره لو تكرمت

لاحظ هذه:

children: List.generate(images.length, (index) {
.
.

..

imagecode.add(base64Image);

هنا الحلقة تمر على جميع عناصر images وهم 6 ويتم إضافة صورة ل imagecode ثم في تابع آخر يتم رفع جميع هذه ال imagecode أي 6 أيضا.

for(int i=0;i<=imagecode.length;i++){
      await http.post(uploadEndPoint, body: {
        "image": imagecode[i],
        "NameImage": name[i],

حاول اختبار القيمة المبدئية مثلا ستكون add image و إذا تغيرت قم بزيادة العداد ب 1 ثم اجعل هذه الحلقة تتكرر بعدد الصور المعدلة فقط.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 1 ساعة قال Wael Aljamal:

لاحظ هذه:


children: List.generate(images.length, (index) {
.
.

..

imagecode.add(base64Image);

هنا الحلقة تمر على جميع عناصر images وهم 6 ويتم إضافة صورة ل imagecode ثم في تابع آخر يتم رفع جميع هذه ال imagecode أي 6 أيضا.


for(int i=0;i<=imagecode.length;i++){
      await http.post(uploadEndPoint, body: {
        "image": imagecode[i],
        "NameImage": name[i],

حاول اختبار القيمة المبدئية مثلا ستكون add image و إذا تغيرت قم بزيادة العداد ب 1 ثم اجعل هذه الحلقة تتكرر بعدد الصور المعدلة فقط.

هلا بيك اخي

انا ك تجربه قمت بحذف العناصر السته وابقيت على واحد وقمت بتحميل صورتان وحدث نفس الامر قام بحفظ بشكل متكرر

image. add("add image);

هذا العناصر

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 11 دقائق مضت قال مروان مروان3:

السلام عليكم ورحمة الله وبركاته 

تحيه طيبه للجميع 

الموضوع لرفع من بعد اذنكم المشكله ما زالت مستمره لم يتم ايجاد حل لها 

هل يمكنك مشاركة التعديلات التي قمت بها من فضلك.

imagecode تتولد تلقائيا ب 6 عنصر ومن ثم لكل عنصر ضمن حلقة for يتم عمل post، يمكنك اختبار القيمة فيما اذا كانت صالحة (الصورة تم اختيارها) قبل عمل الاتصال أو تحديد عدداد Counter بعدد الصور المختارة لتمشي إليه الحلقة ولا تمر على جميع ال 6 عناصر.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 ساعات قال Wael Aljamal:

هل يمكنك مشاركة التعديلات التي قمت بها من فضلك.

imagecode تتولد تلقائيا ب 6 عنصر ومن ثم لكل عنصر ضمن حلقة for يتم عمل post، يمكنك اختبار القيمة فيما اذا كانت صالحة (الصورة تم اختيارها) قبل عمل الاتصال أو تحديد عدداد Counter بعدد الصور المختارة لتمشي إليه الحلقة ولا تمر على جميع ال 6 عناصر.

اهلا بك اخي 

من يومين وانا احاول فيه ولكن بدون فائدة انا عارف انه المشكلة في حلقة for ولكن بسبب نقص الخبره لم اعرف كيف ممكن اضبطها 

 

قمت بعمل حلول مختلفه  منها وضع الكود بشكل التالي بحيث وضعت جملة شرطية:

  void SaveDate() async {
    if(imagecode!=null) {
      for (int i = 0; i < imagecode.length; i++) {
        print('Test_Code ${imagecode.length}');
        var url = uploadEndPoint;
        var response = await http.post(url, body: {
          "image": imagecode[i],
          "NameImage": name[i],


        });
        if (response.statusCode == 200) {



       //
        } else {

        }

      }

    }

  }

 

ومنها وضعه بشكل التالي بحيث اضيف break; لتخرج بعد ان تنتهي من اول دوره ولكن الامر هذا جعل الكود يقوم بحفظ صوره واحده فقط من اصل 2 او اكثر:

void SaveDate() async {
    if(imagecode!=null) {
      for (int i = 0; i < imagecode.length; i++) {
        print('Test_Code ${imagecode.length}');
        var url = uploadEndPoint;
        var response = await http.post(url, body: {
          "image": imagecode[i],
          "NameImage": name[i],


        });
        if (response.statusCode == 200) {



       //
        } else {

        }
        break;//=============================
      }

    }

  }

ايضا قمت بمحاولة هنا وقمت بوضع جمله شرطيه :

  children: List.generate(images.length, (index) {
                  if (images[index] is ImageUploadModel) {
                    ImageUploadModel uploadModel = images[index];
                    if(uploadModel.imageFile!=null){//==============================

                      //base64 image
                      List<int> imageBytes = uploadModel.imageFile.readAsBytesSync();
                      // base64Image = base64Encode(snapshot.data.readAsBytesSync());
                      base64Image = base64Encode(imageBytes); //'base64Image' holds the base64 image string
                      imagecode.add(base64Image);
                      name.add(uploadModel.imageFile.path.split("/").last);}

 

 

ايضا قمت بمحاولة تغير هنا بحيث قمت بحذف ميثود _onAddImageClick

  Future _onAddImageClick(int index, int type) async {
    if (images != null)
      setState(() {

        _imageFile = ImagePicker.pickImage(
          source: type == 1 ? ImageSource.camera : ImageSource.gallery,
          imageQuality: 50,
        );
        getFileImage(index);
      });
  }

  void getFileImage(int index) async {
    _imageFile.then((file) async {
      setState(() {

        ImageUploadModel imageUpload = new ImageUploadModel();
        imageUpload.imageFile = file;
        images.replaceRange(index, index + 1, [imageUpload]);
      });
    });
  }

 

 

وتحويلها بشكل التالي:

  void getFileImage(int index,int type) async {
    _imageFile.then((file) async {
      setState(() {

        _imageFile = ImagePicker.pickImage(
            source: type == 1 ? ImageSource.camera : ImageSource.gallery,
            imageQuality: 50,
        );
      });
    });
  }

ولم ينجح الامر ايضا في محاولة اخرى ايضا مختلفه مثل تغير شكل for  وغيرها ولكن كل شي لم ينجح 

تم التعديل في بواسطة مروان مروان3
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 17 ساعات قال Wael Aljamal:

سنعمل على حساب عدد الصور التي تم تحديدها، أي استدعاء الدالة _onAddImageClick حسب فهمي للشيفرة فاستدعائها يتكرر مع كل تحديد للصورة.

يمكنك تعريف متغير قبل الدالة، وعلينا زيادته ب 1 بعد كل استدعاء أي:


var _imageCounter = 0;
^^^^^^^^^^^^^^^^^^

Future _onAddImageClick(int index, int type) async {
	
    if (images != null)
      setState(() {
	
		_imageCounter ++;
 ______^^^^^^^^^^^^^^^^

        // ignore: deprecated_member_use
        _imageFile = ImagePicker.pickImage(
          source: type == 1 ? ImageSource.camera : ImageSource.gallery,
          imageQuality: 50,
        );
        getFileImage(index);
      });
  }

وفي الحلقة:


for(int i=0;i <  _imageCounter ;i++)
              ^  ^^^^^^^^^^^^^

أصغر تماما لكي لا نجلب صورة إضافية

شكرا لك اخي الكريم

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...