在 Node.js 中使用 Cloudinary 上传图片

# Web 开发 # JavaScript # 编程 # Node.js

在 Web 应用程序中上传和管理图像是一项常见需求，而 Cloudinary 是处理媒体的最流行解决方案之一。它提供了一个强大的平台来高效地存储、转换和交付媒体。在本博客中，我们将探讨如何使用 Node.js 将图像上传到 Cloudinary。

先决条件

在开始之前，请确保您已准备好以下内容：

系统上已安装 Node.js。您可以从 Node.js 官方网站下载它。

对 JavaScript 和 Node.js 有基本的了解。

Cloudinary 上的免费帐户。如果您还没有帐户，请注册。

将图像上传到 Cloudinary 的步骤

1.安装所需的软件包

创建一个新的 Node.js 项目或导航到现有项目目录并安装所需的 npm 包：

npm init -y
npm install cloudinary multer express body-parser dotenv

cloudinary：Node.js 的官方 Cloudinary SDK。

multer：处理 multipart/form-data（用于文件上传）的中间件。

express：用于构建应用程序的Web框架。

body-parser：用于解析传入请求主体的中间件。

dotenv：从 .env 文件加载环境变量。

2.设置Cloudinary帐户

登录到您的 Cloudinary 仪表板。

导航到仪表板部分，您将在其中找到您的云名称、API 密钥和 API 机密。

记下这些凭据，因为我们需要它们在我们的 Node.js 应用程序中配置 Cloudinary。

3. 在 Node.js 项目中配置 Cloudinary

在项目根目录中创建一个 `.env` 文件并添加您的 Cloudinary 凭证：

CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

接下来，创建一个 `config/cloudinary.js` 文件来配置 Cloudinary：

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

dotenv.config();

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

module.exports = cloudinary;

4. 使用 Multer 设置文件上传

创建一个 `middlewares/multer.js` 文件来配置 Multer 的文件上传：

const multer = require('multer');
const path = require('path');

// Set storage engine (temporary storage on server)
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // Temporary folder for uploads
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}${path.extname(file.originalname)}`);
  },
});

// File filter to allow only images
const fileFilter = (req, file, cb) => {
  const allowedTypes = /jpeg|jpg|png|gif/;
  const extname = allowedTypes.test(path.extname(file.originalname).toLowerCase());
  const mimetype = allowedTypes.test(file.mimetype);

  if (extname && mimetype) {
    cb(null, true);
  } else {
    cb(new Error('Only images are allowed!'));
  }
};

const upload = multer({
  storage,
  fileFilter,
});

module.exports = upload;

5. 创建路由来处理图片上传

在 `app.js` 中创建一个简单的 Express 应用程序：

const express = require('express');
const bodyParser = require('body-parser');
const cloudinary = require('./config/cloudinary');
const upload = require('./middlewares/multer');
const fs = require('fs'); // For file system operations

const app = express();

// Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Route to upload image
app.post('/upload', upload.single('image'), async (req, res) => {
  try {
    // Upload to Cloudinary
    const result = await cloudinary.uploader.upload(req.file.path);

    // Delete the file from the server after upload
    fs.unlinkSync(req.file.path);

    res.status(200).json({
      message: 'Image uploaded successfully!',
      url: result.secure_url,
    });
  } catch (error) {
    res.status(500).json({
      message: 'Failed to upload image',
      error: error.message,
    });
  }
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

6. 测试 API

启动服务器：

node app.js

使用 Postman 或 cURL 等工具来测试端点。

网址：http://localhost:3000/upload

方法：POST

Body：选择form-data，添加key image，即需要上传的图片文件。

如果一切设置正确，您应该会收到一个响应，其中包含 Cloudinary 上上传图像的 URL。

响应示例：

{
  "message": "Image uploaded successfully!",
  "url": "https://res.cloudinary.com/your-cloud-name/image/upload/v1234567890/your-image.jpg"
}

结论

在 Node.js 中将图像上传到 Cloudinary 是一个简单的过程。通过利用 Cloudinary 强大的 API 和 Multer 等工具，您可以高效地处理 Web 应用程序中的图像上传、转换和交付。通过上述示例，您现在拥有将 Cloudinary 集成到 Node.js 项目中的坚实基础。

有关更多详细信息，请查看 Cloudinary 官方文档。

CLIS.CC