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

السؤال

نشر

 الان بدأ يرفع صور بنجاح لكن لا يتم عرض صور في واجهة رئيسية بعد ما استخدمنت Cloudinary

برغم انها تحفظ في قاعدة بيانات 

https://image-gallery-llmy3g4pa-zen-allahams-projects.vercel.app/

 

"use server";
import { NextRequest, NextResponse } from "next/server";
import { connectDB } from "@/app/libs/connectDB";
import { isAuthenticate } from "@/app/libs/isAuthenticate";
import Image from "@/app/models/Image";
import { v2 as cloudinary } from "cloudinary";
import { Readable } from "stream";

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

function bufferToStream(buffer: Buffer) {
  const readable = new Readable();
  readable._read = () => {};
  readable.push(buffer);
  readable.push(null);
  return readable;
}

export async function POST(request: NextRequest) {
  try {
    await connectDB();

    const user = await isAuthenticate(request);
    if (!user) {
      return NextResponse.json({ message: "غير مصرح" }, { status: 401 });
    }

    const formData = await request.formData();

    const title = formData.get("title") as string;
    const description = formData.get("description") as string;
    const file = formData.get("file") as File;

    if (!file) {
      return NextResponse.json({ message: "اختر صورة أولاً" }, { status: 400 });
    }

    const fileBuffer = Buffer.from(await file.arrayBuffer());


    const uploadResult = await new Promise<any>((resolve, reject) => {
      const stream = cloudinary.uploader.upload_stream(
        { folder: "images" },
        (error, result) => {
          if (error) reject(error);
          else resolve(result);
        }
      );
      bufferToStream(fileBuffer).pipe(stream);
    });

    // إنشاء مستند جديد في MongoDB
    const newImage = await Image.create({
      title,
      description,
      imageUrl: uploadResult.secure_url,
      userId: user._id,
      likes: 0,
      likedBy: [],
    });

    return NextResponse.json({
      success: "تم رفع الصورة بنجاح",
      image: newImage,
    });
  } catch (err) {
    console.log(err);
    return NextResponse.json(
      { message: "حدث خطأ في السيرفر" },
      { status: 500 }
    );
  }
}
import { connectDB } from "@/app/libs/connectDB";
import Image from "@/app/models/Image";
import { NextRequest, NextResponse } from "next/server";


export async function GET(request:NextRequest){
    try{
       await connectDB();
       const images = await Image.find().sort({createdAt: -1});
       return NextResponse.json(images); 
    }catch(err){
        console.log(err);
        return NextResponse.json({ message: "حدث خطأ في السيرفر" }, { status: 500 });
    }
}

 

Recommended Posts

  • 0
نشر

الرابط الخاص بالمشروع هو رابط خاص ويطب إذن للدخول عليه .

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

أيضا قم بطباعة الصور في ال console وانظر هل يتم طباعة الصور بشكل صحيح أم لا . وإرفاق النتائج التي تظهر لك.

  • 0
نشر

هل تظهر الصور بصيغة JSON عند التوجه للرابط:

https://image-gallery-llmy3g4pa-zen-allahams-projects.vercel.app/api/images

في حال لم تظهر، فيجب استخدام useEffect لجلب الصور، ولكن في حال المكون هو  Server Component فتستخدم دالة غير متزامنة async  لجلب الصور من الـ api

كذلك في next.config.js أضف التالي:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['res.cloudinary.com'],
  },
}

module.exports = nextConfig

للسماح لمكون Image من Next.js لتحميل صور من مصادر خارجية مثل Cloudinary.

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...