درک مطلب در آپلود عکس

یونس قربانی

سلام دوست من

برای ارسال عکس ما نیاز داریم که آپلودش کنیم

پس در فرانت یک فایل جاوااسکریپت ساختیم و به صورت AJAX شروع کردیم به ارسال عکس و برای آپلود عکس باید به مسیری خاص بفرستیم که اونجا برای دریافت عکس آماده باشه و کدهاش نوشته شده باشه.

در سرور هم گفتیم که اگر درخواستی به این مسیر اومد 

//  @desc   Dashboard Handle Image Upload
//  @route  POST /dashboard/image-upload
router.post("/image-upload", authenticated, adminController.uploadImage);

اول چک کن که احراز هویت شده باشه کاربری که درخواست فرستاده بعد توسط کنترولر uploadaImage درخواستش رو بررسی کن

در کنترولر هم توسط کتابخانه multer که برای آپلود و دریافت عکس مورد استفاده قرار میگیره درخواست اومده رو بررسی میکنیم. بهش پیکربندی هم دادیم

  const upload = multer({
    limits: { fileSize: 4000000 },
    fileFilter: fileFilter,
  }).single("image");

به multer گفتیم که سایز عکس دریافتی چقدر باشه و چه فایلهایی رو میتونی دریافت کنی توسط fileFilter و همچنین گفتیم که single یعنی تک به تک دریافت میکنی و image نوشته شده درون single هم کلید عکس ما در formData هست که multer بفهمه عکس کدوم یکی هست.

  upload(req, res, async (err) => {
    if (err) {
      if (err.code === "LIMIT_FILE_SIZE") {
        return res
          .status(400)
          .send("حجم عکس ارسالی نباید بیشتر از 4 مگابایت باشد");
      }
      res.status(400).send(err);
    } else {
      if (req.file) {
        const fileName = `${generate()}_${req.file.originalname
          }`;
        await sharp(req.file.buffer)
          .jpeg({
            quality: 60,
          })
          .toFile(`./public/uploads/${fileName}`)
          .catch((err) => console.log(err));
        res.status(200).send(
          `http://localhost:3000/uploads/${fileName}`
        );
      } else {
        res.send("جهت آپلود باید عکسی انتخاب کنید");
      }
    }
  });

خوب بعد از پیکربندی ما متغییر upload رو داریم که multer در دسترس ما قرار داده تا بتونیم عکس رو دریافت کنیم.

پس از upload استفاده میکنیم و req, res رو بهش میدیم و همچنین کال بک err

چک میکنیم اگر خطایی بود و اون خطا برابر "LIMIT_FILE_SIZE" باشه یعنی حجم عکس بیشتر از ۴ مگابایت هست پس جواب بفرستیم با status کد ۴۰۰ به همراه خطا.

status به معنای وضعیت نشان دهنده وضعیت عملیات خواسته شده هست و برای نشون دادن وضعیت از کد استفاده میکنیم که هر کدی معنای خودش رو داره

برای مثال کد 400 به معنای bad request هست یعنی سرور عملیات درخواست شده رو پردازش نمیکنه به دلیل اینکه مشکلی هست در سمت client و درخواست درستی انجام نشده

خوب اگر خطایی هم نبود چک میکنیم که آیا فایلی ارسال شده توسط کاربر. اگر فایلی ارسال شده باشه باید req.file حاوی مقدار باشه. اگر فایلی نبود درون req.file در آخر پیام ارسال میکنیم که جهت آپلود باید عکسی انتخاب کنید.

اگر شرط درست بود و فایلی بود نام فایل رو درمیارم و توسط ابزار sharp عکس رو کم حجم میکنم و بهش میگم که کجا عکس رو ذخیره کنه و اینجاست که گفته میشه عکس کجا ذخیره بشه.

اما اگر از sharp نمی خوایم استفاده کنیم باید در پیکربندی multer گفته بشه که عکس کجا ذخیره بشه.

بعد از اتمام عملیات و درست بودنش status ۲۰۰ ارسال میکنیم به معنای موفقیت آمیز بودن عملیات.

شما میتونید عکسی که دریافت کردید رو هم ذخیره کنید در فولدر public و در کنارش هم در پایگاه داده ذخیره کنید ولی پیشنهاد نمیشه که تمامیه عکس ها درون پایگاه داده ذخیره بشه چون باعث خواهد شد پایگاه داده بسیار سنگین بشه.

تمامیه این موارد رو در ویدئو کامل شرح دادم که status چی هست و چرا این کدها ارسال میشه و ....

خلیل علیزاده

استاد من این توضیحات را در کلیپ هاتون هم متوجه شدم کامل ولی الان سوالم اینجاست من می گم الان یک عکس را من در public ذخیره می کنم و بعد می خواهم این عکس در درون متن جاسازی کنم. خب حالا سوال اینجاست فرض کنید کاربری در منزلش و با سیستم خودش سایت من را باز می کنه و وقتی سایت باز میشه عکس باید از پوشه ی public برداشته بشه مگه پوشه ی پابلیک قابل دسترسه براش؟ نمی تونم دقیق منظورم را برسونم ولی در کل منظورم اینه که ما قبلا اطلاعات را برای این که همه بتونند ازش استفاده کنند در داخل دیتابیس ذخیره می کردیم و با درخواست از طرف کلاینت به سرور داده میشد و سرور اون درخواست را از دیتابیس بیرون می اورد و به کلاینت می داد ولی الان که اطلاعات که همان عکس است در داخل public ذخیره شده من سوالم اینه این public دیتا بیس که نیست دیگه درسته؟ پس این حجمی که اشغال می کنه حجم کجاست؟ 

یونس قربانی

آها

فکر میکنم جلوتر بعد از آپلود تصویر کاری میکنیم که آدرس تصویر رو نمایش بده تا بتونیم درون ckeditor قرارش بدیم.

به این صورت نیازی نیست عکس همراه متن در پایگاه داده ذخیره بشه و صرفا لینکش ذخیره میشه و در زمان نمایش از فولدر public بارگذاری خواهد شد.

حالا شما میتونید از قابلیت آپلود خود ckeditor استفاده کنید که خودش عملیات آپلود رو انجام میده و درون پایگاه داده هم ذخیره میکنه