【Web Library】Nextjs13で覚える便利なライブラリ【#１９Cloudinary Uploader】

【#１９Cloudinary Uploader】

YouTube: https://youtu.be/LlhM6-_ZRjg

https://youtu.be/LlhM6-_ZRjg

今回は画像を「Cloudinary」にアップロードする処理の部分について解説します。

「result.secure_url」で取得したURLを
imgタグやImageコンポーネントのソースに設定すると
アップロードした画像を表示することができるようになります。

pages/api/upload.ts

import type { NextApiRequest, NextApiResponse } from "next";
import cloudinary from 'cloudinary'

cloudinary.v2.config({
  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
  api_key: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const images = req.body.images;

  let imagesLinks = []

  for (let i = 0; i < images.length; i++) {
    const result = await cloudinary.v2.uploader.upload(images[i], {
      folder: "udmec"
    })
    console.log(result);
    imagesLinks.push({
      public_id: result.public_id,
      secure_url: result.secure_url
    })
  }

  res.status(200).json({ message: "success", links: imagesLinks });
}