Rumah  >  Artikel  >  hujung hadapan web  >  Cara Mengintegrasikan Cloudinary dalam Node.jsd

Cara Mengintegrasikan Cloudinary dalam Node.jsd

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-06 22:40:03535semak imbas

How to Integrate Cloudinary in Node.jsd

Mengurus aset media seperti imej dan video dengan cekap adalah penting untuk aplikasi web dan Cloudinary menawarkan penyelesaian yang sangat baik untuk mengendalikan aset ini dengan lancar. Dalam siaran ini, kami akan melalui proses penyepaduan Cloudinary dalam projek Node.js.

Apa Itu Cloudinary?

Cloudinary ialah perkhidmatan pengurusan media berasaskan awan yang membolehkan pembangun menyimpan, mengubah dan menghantar imej dan video dengan mudah dalam format mesra web. Dengan ciri seperti pengoptimuman imej automatik, transformasi responsif dan penghantaran kandungan melalui CDN, Cloudinary telah menjadi pilihan utama bagi kebanyakan pembangun.
Teroka Mengenai Harga Cloudinary

Prasyarat

Sebelum menyelam, pastikan anda mempunyai:

  • Node.js dipasang pada sistem anda
  • Persediaan aplikasi Node.js asas
  • Akaun Cloudinary (anda boleh mendaftar di sini jika anda tidak mempunyai akaun)

Langkah 1: Pasang Cloudinary SDK

npm install cloudinary

Langkah 2: Konfigurasikan Cloudinary

const cloudinary = require('cloudinary').v2;

cloudinary.config({
  cloud_name: 'YOUR_CLOUD_NAME',
  api_key: 'YOUR_API_KEY',
  api_secret: 'YOUR_API_SECRET',
});

module.exports = cloudinary;

Langkah 3: Sediakan Pembolehubah Persekitaran

CLOUD_NAME=your-cloud-name
API_KEY=your-api-key
API_SECRET=your-api-secret

npm install dotenv
require('dotenv').config();

cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.API_KEY,
  api_secret: process.env.API_SECRET,
});

Langkah 4: Muat Naik Imej ke Cloudinary

const cloudinary = require('./config');

async function uploadImage(imagePath) {
  try {
    const result = await cloudinary.uploader.upload(imagePath, {
      folder: 'samples', // Optional: specify the folder to store images
    });
    console.log('Image uploaded successfully:', result.url);
    return result.url;
  } catch (error) {
    console.error('Error uploading image:', error);
  }
}

// Example usage
uploadImage('path/to/your/image.jpg');

Langkah 5: Ubah Imej dengan Cloudinary

const transformedImageUrl = cloudinary.url('sample.jpg', {
  width: 400,
  height: 300,
  crop: 'fill',
});

console.log('Transformed Image URL:', transformedImageUrl);

Langkah 6: Kendalikan Muat Naik Fail dalam Aplikasi Anda

npm install multer

const multer = require('multer');
const upload = multer({ dest: 'uploads/' }); // Temporary folder for uploaded files

app.post('/upload', upload.single('image'), async (req, res) => {
  try {
    const imagePath = req.file.path;
    const imageUrl = await uploadImage(imagePath);
    res.json({ imageUrl });
  } catch (error) {
    res.status(500).json({ error: 'Failed to upload image' });
  }
});

Langkah 7: Optimumkan dan Hantarkan Aset Media

const optimizedImageUrl = cloudinary.url('sample.jpg', {
  fetch_format: 'auto',
  quality: 'auto',
});

console.log('Optimized Image URL:', optimizedImageUrl);

Kesimpulan

Mengintegrasikan Cloudinary ke dalam projek Node.js anda adalah mudah dan membuka dunia ciri pengurusan media. Sama ada anda berurusan dengan imej atau video, API Cloudinary yang berkuasa memudahkan untuk mengoptimumkan, mengubah dan menyampaikan aset dengan cekap.

Selamat mengekod!

Atas ialah kandungan terperinci Cara Mengintegrasikan Cloudinary dalam Node.jsd. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn