🙇

【Web Library】Nextjs13で覚える便利なライブラリ【#１７現在発生している問題について】

2023/03/18に公開

Next.js

tech

【#１７現在発生している問題について】

YouTube: https://youtu.be/cO-96Bpr6mk

https://youtu.be/cO-96Bpr6mk

前回に作成した「pages」->「api」->「upload.tsx」ですが、
「req.body」に含まれる「images」が正常に取得できない問題が発生しています。

以下のファイルに「console.log(images)」を追記して、
画像データを送信して、「images」がコンソールに表示されない場合は、

pages/api/upload.ts

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

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

  res.status(200).json('upload success');
}

こちらからコードをダウンロードして、
VSコードでフォルダを開いた状態にしてください。

ダウンロードしたフォルダにはライブラリ等が含まれていませんので、

npm install

でライブラリをインストールします。

そして、「pages」->「api」->「upload.tsx」を開いて、
「cloudinary」の部分をコメントアウトにします。

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;
  console.log(images);
  

  // if (images.length === 0) {
  //   return res.status(400).json({ message: "images file" });
  // }

  // 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,
  //     url: result.secure_url,
  //   });
  // }
  res.status(200).json({ message: "success" });
}

ここまでできましたら、ローカルサーバーを起動して

http://localhost:3000/cdl

ブラウザでこちらにアクセスします。

画像を送信して、
コンソールに画像データが表示されれば、
問題ないかと思います。

原因につきまして、断定はできないのですが、
こちらのプロトタイプのデータと動画内で作成したデータの違いは、
ターボパックを使用しているかしていないかの違いになります。

大変お手数をおかけしてしまい、
申し訳ございません。
何卒よろしくお願い致します。

【#１７現在発生している問題について】

Discussion