Next.js 中使用 Cloudinary 进行无缝图像上传

2024-03-14 18:01:43

使用 Cloudinary 在 Next.js 中上传图像

简介

在当今以视觉为中心的数字世界中，图像变得比以往任何时候都更加重要。为了在 Next.js 应用中无缝地处理图片上传，Cloudinary 是一个强有力的解决方案。本文将指导您如何使用 Cloudinary 设置和配置您的 Next.js 应用，以便轻松上传和管理图像。

设置 Cloudinary 帐户

首先，前往 Cloudinary 网站并创建一个帐户。创建帐户后，您将获得云名称、API 密钥和 API 机密。这些详细信息将在配置 Cloudinary SDK 时使用。

配置 Cloudinary SDK

接下来，在您的 Next.js 应用目录中，安装 Cloudinary SDK：

npm install cloudinary

安装完成后，在您的应用中创建一个名为 cloudinaryConfig.js 的文件并添加以下代码：

import cloudinary from "cloudinary";

const cloudinaryConfig = {
  cloud_name: process.env.CLOUDINARY_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
};

export default cloudinaryConfig;

确保在 .env 文件中设置 Cloudinary 环境变量：

CLOUDINARY_NAME=<your-cloud-name>
CLOUDINARY_API_KEY=<your-api-key>
CLOUDINARY_API_SECRET=<your-api-secret>

创建上传图像路由

在 pages/api/upload.js 中，创建一个新的 API 路由：

import cloudinary from "../utils/cloudinaryConfig";
import formidable from "formidable";

export const config = {
  api: {
    bodyParser: false,
  },
};

const handler = async (req, res) => {
  if (req.method === "POST") {
    const data = await new Promise((resolve, reject) => {
      const form = new formidable.IncomingForm();

      form.parse(req, async (err, fields, files) => {
        if (err) return reject(err);

        const file = files.file;
        const uploadedImage = await cloudinary.v2.uploader.upload(
          file.filepath,
          {
            folder: "your-cloudinary-folder-name",
          }
        );

        resolve(uploadedImage);
      });
    });

    res.status(200).json({ data });
  } else {
    res.status(405).json({ error: "Method not allowed" });
  }
};

export default handler;

上传图像

在需要上传图像的组件中，使用 Axios 或 fetch API 向 /api/upload 路由发送图像文件：

import axios from "axios";

const handleImageUpload = async (e) => {
  const formData = new FormData();
  formData.append("file", e.target.files[0]);

  try {
    const { data } = await axios.post("/api/upload", formData);
    console.log("Image uploaded successfully:", data);
  } catch (error) {
    console.error("Error uploading image:", error);
  }
};