如何使用 Node.js 构建安全服务器并使用 Cloudinary 快速上传图像（下）

AirStar
1,873 阅读6分钟

「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」。

如何将图像上传到 Cloudinary

现在我们有一个很酷的服务器正在运行，让我们学习如何将我们的图像保存在 Cloudinary 上。这只是一个基本的介绍，所以应该很有趣😊。

Cloudinary帮助世界各地的开发人员轻松管理图像。

如何创建 Cloudinary 帐户

要创建帐户，请访问Cloudinary 网站。

  1. 单击 上的sign up按钮top right。
  2. 填写相应显示的表格。
  3. 使用按钮提交表单Create Account。
  4. 通过验证您的电子邮件检查您的电子邮件以完成

您应该能够访问您的仪表板，如下所示：

云仪表板

注意Account details. 你不应该向任何人透露这些信息。我在这里向您展示它是因为这是一个临时帐户，我仅用于本教程的目的。

也检查Media Library标签。这是上传的图像将出现的地方。

如果你有所有这些展示，那么让我们摇滚吧......

如何在我们的项目中安装 Cloudinary

打开终端并导航到项目目录。

执行以下命令进行安装Cloudinary：

  npm install cloudinary --save

如何在我们的项目中设置 Cloudinary

在 app.js 文件中，要求cloudinary如下const app = express();：

  const cloudinary = require('cloudinary').v2

接下来，从仪表板上的帐户详细信息中添加配置详细信息，如下所示：

    cloud_name: 'place your cloud_name here',
    api_key: 'place your api_key here',
    api_secret: 'place your api_secret here',

这就是我所拥有的：

  // cloudinary configuration
  cloudinary.config({
    cloud_name: "dunksyqjj",
    api_key: "173989938887513",
    api_secret: "ZPLqvCzRu55MaM1rt-wxJCmkxqU"
  });

如何创建端点以上传图像

为避免我们的代码出现错误，首先将现有 API 替换为以下代码：

  app.get("/", (request, response) => {
    response.json({ message: "Hey! This is your server response!" });
  });

基本上是一样的，但是这一次，我们用get动词代替use动词，并添加了一个根端点（/）。

接下来，就在这一module.exports = app;行之前，我们将创建我们的image-uploadAPI。 让我们首先将这段代码放在那里：

// image upload API
app.post("/upload-image", (request, response) => {});

基本上，这就是我们设置 API 的方式。APIPOST request告诉server我们server应该request以一定程度的安全性来处理。它使用两个参数来发出这个请求：一个end-point(/upload-image) 和一个callback function((request, response) => {})。

让我们通过构建callback function.

如何构建回调函数

安装正文解析器

这个 npm 包使我们能够使用req.body或request.body视情况处理传入的请求。我们将body-parser使用以下代码进行安装：

  npm install --save body-parser

为我们的项目配置 body-paser

在 app.js 中需要 body-parse，如下所示：

const bodyParser = require('body-parser');

接下来，添加以下代码以将其json功能设置为我们应用程序的全局中间件，如下所示：

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

我们现在可以适当地处理我们的请求正文。

回到构建我们的功能

在函数中，添加以下代码以收集用户输入的任何数据（图像）：

    // collected image from a user
    const data = {
        image: request.body.image,
    };

接下来，cloudinary使用以下代码上传图片：

cloudinary.uploader.upload(data.image);

基本上，这就是我们上传图片所需的全部内容。所以我们的app.js样子是这样的：

const express = require("express");
const app = express();
const cloudinary = require("cloudinary").v2;
const bodyParser = require('body-parser');

// body parser configuration
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// cloudinary configuration
cloudinary.config({
  cloud_name: "dunksyqjj",
  api_key: "173989938887513",
  api_secret: "ZPLqvCzRu55MaM1rt-wxJCmkxqU"
});

app.get("/", (request, response) => {
  response.json({ message: "Hey! This is your server response!" });
});

// image upload API
app.post("/image-upload", (request, response) => {
    // collected image from a user
    const data = {
      image: request.body.image,
    }

    // upload image here
    cloudinary.uploader.upload(data.image);
    
});

module.exports = app;

现在这看起来不错，而且效果很好。您可以使用postman. 但是，如果我们的应用程序在处理完我们的请求后能够给我们反馈，那就太棒了，对吧？

为了实现这一点，我们将then...catch...在云上传中添加以下块，如下所示：

    // upload image here
    cloudinary.uploader.upload(data.image)
    .then((result) => {
      response.status(200).send({
        message: "success",
        result,
      });
    }).catch((error) => {
      response.status(500).send({
        message: "failure",
        error,
      });
    });

所以我们的最终代码将是：

const express = require("express");
const app = express();
const cloudinary = require("cloudinary").v2;
const bodyParser = require('body-parser');

// body parser configuration
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// cloudinary configuration
cloudinary.config({
  cloud_name: "dunksyqjj",
  api_key: "173989938887513",
  api_secret: "ZPLqvCzRu55MaM1rt-wxJCmkxqU"
});

app.get("/", (request, response) => {
  response.json({ message: "Hey! This is your server response!" });
});

// image upload API
app.post("/image-upload", (request, response) => {
    // collected image from a user
    const data = {
      image: request.body.image,
    }

    // upload image here
    cloudinary.uploader.upload(data.image)
    .then((result) => {
      response.status(200).send({
        message: "success",
        result,
      });
    }).catch((error) => {
      response.status(500).send({
        message: "failure",
        error,
      });
    });
    
});

module.exports = app;

如何测试我们的 API

在根目录中创建一个文件夹/目录并将其命名images如下：

 mkdir images

将您选择的图像复制到此文件夹。（现在，相对于 app.js 文件的图像路径应如下所示："images/<your-image.jpg">。）

现在让我们继续postman。

  1. 在地址栏中，输入：http://localhost:3000/image-upload
  2. 将Header键设置为Content-Type，值设置为application/json
  3. 将 设置为body我们json在代码中声明的数据，如下所示：
       {
	   "image": "images/oskar-yildiz-gy08FXeM2L4-unsplash.jpg"
       }

点击Send按钮并等待上传完成并获得您的回复：

邮递员设置上传图片

现在，这就是结果。该图像现在有一个public_id由 Cloudinary 随机生成的唯一图像，以及一个secure_url全局可访问的图像（您可以将其加载到浏览器中查看）。
显示上传结果的邮递员

最后，检查Media LibraryCloudinary 仪表板上的选项卡，您应该有一个带有new徽章的新图像。public_id这将有一个与我们在上面的邮递员结果中看到的匹配的唯一 ID，如下图所示：

Cloudinary 媒体文件

哇！我们在没有压力的情况下坚持图像......感觉很好。

好吧，还有一件事——安全！

我们的 Cloudinary 配置详细信息在我们的 app.js 文件中公开。如果我们将项目推送到 GitHub，任何愿意查看的人都可以公开使用它。如果它落入坏人之手，这就会成为一个问题。

但是不要担心这里的任何事情，这个空间中的几乎所有东西都有一个修复程序。我们将使用dotenvnpm 包向公众隐藏我们的配置。

如何保护我们的配置dotenv

首先，如果您还没有安装dotenv ，则需要：

npm install dotenv --save

然后dotenv像app.js这样要求：

  require('dotenv').config()

在根目录下新建一个文件并命名.env。

在文件中，输入您的 Cloudinary 配置详细信息，如下所示：

  CLOUD_NAME=dunksyqjj
  API_KEY=173989938887513
  API_SECRET=ZPLqvCzRu55MaM1rt-wxJCmkxqU

在 app.js 文件中，我们将.env通过process.env属性访问文件中的配置，如下所示：

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

这是我app.js目前的代码：

const express = require("express");
const app = express();
const cloudinary = require("cloudinary").v2;
const bodyParser = require('body-parser');
require('dotenv').config()

// body parser configuration
app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));

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

app.get("/", (request, response, next) => {
  response.json({ message: "Hey! This is your server response!" });
  next();
});

// image upload API
app.post("/image-upload", (request, response) => {
    // collected image from a user
    const data = {
      image: request.body.image,
    }

    // upload image here
    cloudinary.uploader.upload(data.image)
    .then((result) => {
      response.status(200).send({
        message: "success",
        result,
      });
    }).catch((error) => {
      response.status(500).send({
        message: "failure",
        error,
      });
    });
});

module.exports = app;

让我们再次测试我们的应用程序以确保没有任何问题。这是我的结果：

云媒体库

我现在有两个相同的图像，但不同public_id的 s。

就是这样！

耶！我们的应用程序比开始时更安全。

结论

在本教程中，我们完成了仅使用 Node.js 创建服务器的步骤。在那之后，我们使用 Express 和 nodemon 改进了我们的服务器。

最后，我们看到了如何通过 Express 应用程序将图像上传到 Cloudinary，以及如何使用dotenv包保护我们的配置细节。

这只是一个介绍。如果您使用此应用程序，您可以做更多的事情。

avatar
文章
阅读
粉丝