مشكلة في رفع الصور في تطبيق باستخدام reac

إذا كنت تريد رفع أكثر من صورة فيجب وضعهم جميعا فى مكان واحد حتى يتم رفعهم فى الواجهة الخلفية .

حيث لاحظت انك تقوم كل مرة بإستدعاء الدالة handleImageChange بإستبدال الصورة الحالية ولهذا سيتم رفع صورة واحده فقط .

لذلك أولا يجب عليك تغير طريقة إضافة الصورة هكذا :

const handleImageChange = (e) => {
    const file = image;
    file.push(e.target.files[0])
    setimage(file)
  }

ويجب عليك تغير ال image إلى array فى كل مكان هكذا :

const [image, setimage] = useState([])

ويجب عدم وضع الصورة في مصفوفة ال city ولكن فقط قم بوضع الإسم الخاص بالصورة حتى نقوم في الواجهة الخلفية بالتتحقق من الإسم الجديد لها .

وبعد ذلك فى الواجهة الخلفية إذا كنت تقوم بإستخدام multer فيجب استخدام array بدلا من single هكذا :

upload.single('image')

upload.array('image')

حيث يجب إستبدال السطر الأول بالسطر الثانى : 

وبعد ذلك بعد رفع الصور ستجد الصور فى req.files .  ويمكنك الآن التكرار على ال files والتحقق من المصفوفة cites والتاكد من الإسم القديم originalname و الإسم فى مصفوفة cities و بعد ذلك إستبدال السم القديم في cities بالاسم الجديد filename و هكذا سيتم حفظها في قاعدة البيانات