nodejsとdotenvによる曇りのイメージアップロード

Cloudinary 世界中の開発者は最小限の努力で画像を管理する.このチュートリアルでは、我々はどのように我々のアプリケーションから画像をアップロードする方法を見てされますcloudinary .
これは、最後のチュートリアルの設定を継続することです.
あなたはそれをチェックアウトするか、先に行くことができますし、クローンrepository . 指示に従ってくださいREADME.MD あなたのローカルマシンでプロジェクトを設定するにはcloudinary .

アカウントを作成する

アカウントを作成するにはCloudinary Website 閉じるこの動画はお気に入りから削除されています.

をクリックしますsign up ボタンオンtop right .

それに応じて表示するフォームを入力します.

フォームをCreate Account ボタン.

あなたの電子メールをチェックすることによって終わるために、あなたの電子メールをチェックしてください

次のように見えるダッシュボードにアクセスできます.

注意Account details . 誰にも明らかにされてはいけない.このチュートリアルの目的のためだけに使用される一時的なアカウントであるので、私はあなたにこれを明らかにしています.
チェックアウトMedia Library タブも、これはアップロードされた画像が表示される場所です.
あなたがこれらのすべてのショーを持っているならば、次に揺れましょう.

プロジェクトにCloudaryをインストール

前に端末を開いていない場合は、プロジェクトディレクトリに移動する時間です.
インストールするコマンドを実行しますCloudinary

  npm install cloudinary --save

我々のプロジェクトのセットアップCloudary

アプリで.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を作成する

コードのバグを回避するには、まず既存のAPIを次のコードに置き換えます.

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

それは基本的に同じですが、今回はget 動詞の代わりに動詞use 動詞とルートエンドポイントを追加しました./ ).

次に、module.exports = app; ライン、私たちは私たちを作成するimage-upload API.

では、このコードを

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

基本的に、APIの設定方法です.APIはPOST request にserver 語るserver そのrequest セキュリティの程度で処理する必要があります.このリクエストを行う際に2つのパラメータを使用しますend-point 画像をアップロードするcallback function ("request , response )=> {}).
APIを構築することによって、生命をcallback function

コールバック関数の構築

ボディパーサーのインストール

このNPMパッケージでは、着信要求を処理することができますreq.body or request.body として.我々は、インストールされますbody-parser 次のコードを使用します.

  npm install --save body-parser

我々のプロジェクトのための体パイナーの設定

我々のアプリでは、体のパースが必要です.そうような人

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

アドレスバーに次のように入力します.http://localhost:3000/image-upload

設定するHeader キーContent-Type とapplication/json

設定するbody にjson このように我々のコードで宣言したデータ:

       {
       "image": "images/oskar-yildiz-gy08FXeM2L4-unsplash.jpg"
       }

ヒットSend ボタンをアップロードを完了し、あなたの応答を得るのを待つ

さて、これが結果です.現在、イメージはユニークですpublic_id は、ランダムに生成されるsecure_url これは大域的にアクセス可能です(ブラウザでロードすることができます).

最後に、チェックMedia Library あなたの曇り場ダッシュボードのタブでは、新しいイメージを持つ必要がありますnew それにマッチするユニークなIDがあるバッジpublic_id 我々は、以下のイメージのように上記の郵便配達人結果で見ました

ワラ!我々は、ストレスなしでイメージを持続させています..それは良い感じ.
まあ、もう一つのこと-セキュリティ!
私たちの曇りの構成の詳細は、我々のアプリで公開されています.jsファイル.我々がプロジェクトをGiThubに押しやるならば、それがチェックする気がある誰にでも公的に利用可能になります、そして、それが間違った手に入るならば、それは問題になります.
しかし、ここでものを心配しないでください、このスペースでほとんどすべてのために修正があります.私たちはdotenv NPMパッケージは、パブリックから我々の設定を隠します.

安全な設定

インストールDotenv

npm install dotenv --save

必要dotenv インapp.js ライクソー

  require('dotenv').config()

ルートディレクトリに新しいファイルを作成し、名前を付けます.env

このファイルでは、以下のようにしてCloudinary設定の詳細を入力します.

  CLOUD_NAME=dunksyqjj
  API_KEY=173989938887513
  API_SECRET=ZPLqvCzRu55MaM1rt-wxJCmkxqU

アプリで.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;

何も壊れていることを確認するために再び我々のアプリをテストしましょう.これが私の結果です

私は今、2つの同じイメージが異なるpublic_idそして、それ!
うーん!我々のアプリケーションは、それが開始時よりも安全です.

結論

このチュートリアルでは、NodeJSアプリケーションを介してCloudaryに画像をアップロードに関与する手順を介して私たちを取ることができた.
最後に、我々の設定の詳細を確保するにはdotenv NPMパッケージ
すべてのコードが利用可能ですhere
さて、NODEJSを通して我々のイメージをCloudaryにアップロードした後に、我々がそれを取り戻すことができないか、使うことができないならば、それはほとんど役に立たないです.この理由から、我々は見ています.
質問、コメントや提案がある場合は、コメントのセクションにドロップしてください.
また、フォローすることができます社会メディアプラットフォーム上で私にメッセージ.
陳川Github
あなたの時間をありがとう.