将 Cloudinary 集成到 Nextjs 应用程序中

npm install cloudinary

cloudinary_url=cloudinary://<api_key>:<api_secret>@<cloud_name></cloud_name></api_secret></api_key>

// utils/cloudinary.jsimport { v2 as cloudinary } from 'cloudinary';cloudinary.config({  cloud_name: process.env.cloudinary_cloud_name,  api_key: process.env.cloudinary_api_key,  api_secret: process.env.cloudinary_api_secret,});export const uploadimage = async (file) => {  try {    const result = await cloudinary.uploader.upload(file, {      folder: 'your_folder_name', // optional    });    return result.secure_url; // return the url of the uploaded image  } catch (error) {    console.error('cloudinary upload error:', error);    throw new error('upload failed');  }};

// pages/api/upload.jsimport { uploadimage } from '../../utils/cloudinary';export default async function handler(req, res) {  if (req.method === 'post') {    const { file } = req.body; // assume you're sending a file in the body    try {      const url = await uploadimage(file);      res.status(200).json({ url });    } catch (error) {      res.status(500).json({ error: error.message });    }  } else {    res.setheader('allow', ['post']);    res.status(405).end(`method ${req.method} not allowed`);  }}

// components/ImageUpload.jsimport { useState } from 'react';const ImageUpload = () => {  const [file, setFile] = useState(null);  const [imageUrl, setImageUrl] = useState('');  const handleFileChange = (event) => {    setFile(event.target.files[0]);  };  const handleSubmit = async (event) => {    event.preventDefault();    const formData = new FormData();    formData.append('file', file);    const res = await fetch('/api/upload', {      method: 'POST',      body: formData,    });    const data = await res.json();    if (data.url) {      setImageUrl(data.url);    } else {      console.error('Upload failed:', data.error);    }  };  return (