En savoir plus sur Cloudinary et ses tarifs.
Inscrivez-vous sur Cloudinary et créez un nouveau compte si vous n'en avez pas.
Vous pouvez installer le SDK Cloudinary en utilisant npm ou Yarn :
npm install cloudinary
Vous pouvez créer un fichier de configuration pour contenir vos informations d'identification Cloudinary. C'est une bonne pratique de les conserver dans des variables d'environnement.
Créez un fichier .env.local à la racine de votre projet et ajoutez vos informations d'identification Cloudinary :
CLOUDINARY_URL=cloudinary://<api_key>:<api_secret>@<cloud_name> </cloud_name></api_secret></api_key>
// utils/cloudinary.js import { 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.js import { 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.js import { 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 (
Exécutez votre application Next.js et testez la fonctionnalité de téléchargement d'images.
Vous devriez maintenant avoir une intégration fonctionnelle de Cloudinary dans votre application Next.js ! Si vous avez des exigences spécifiques ou avez besoin d'une personnalisation plus poussée, n'hésitez pas à demander !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!