🙇
【Web Library】Nextjs13で覚える便利なライブラリ【#17現在発生している問題について】
【#17現在発生している問題について】
YouTube: 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" });
}
ここまでできましたら、ローカルサーバーを起動して
ブラウザでこちらにアクセスします。
画像を送信して、
コンソールに画像データが表示されれば、
問題ないかと思います。
原因につきまして、断定はできないのですが、
こちらのプロトタイプのデータと動画内で作成したデータの違いは、
ターボパックを使用しているかしていないかの違いになります。
大変お手数をおかけしてしまい、
申し訳ございません。
何卒よろしくお願い致します。
Discussion