mongoDB 데이터베이스에 이미지를 업로드하고 저장하는 방법은 무엇입니까?

안녕하세요 여러분, 오늘은 이미지 mongoDB 데이터베이스를 업로드하고 저장하는 방법을 배웁니다. 데이터베이스에 미디어 파일을 저장하기 위한 실제 프로젝트에서는 권장되지 않습니다. 우리는 개발자이기 때문에 왜 배워야 할까요 😞 . 농담이야 ...

그럼 코딩을 시작해 볼까요?


Project Github link

앱 개요:

프로젝트 구조


다음 표는 내보낼 Rest API의 개요를 보여줍니다.


행동 양식
URL
행위


게시하다
/파일 업로드
데이터베이스에 이미지 업로드

가져 오기
/파일/:파일이름
스트림 이미지

삭제
/파일/:파일이름
데이터베이스에서 이미지 삭제


Node.js 앱 만들기

$ mkdir media-upload-node-mongo
$ cd media-upload-node-mongo
$ npm init --yes
$ npm install express mongoose dotenv multer multer-gridfs-storage gridfs-stream

Express : Express는 최소한의 유연한 Node.js 웹 애플리케이션 프레임워크입니다.
몽구스 : 몽구스는 MongoDB 및 Node.js용 객체 데이터 모델링(ODM) 라이브러리입니다.
Dotenv : .env 파일에서 환경 변수를 로드합니다.
Multer : Multer는 주로 파일 업로드에 사용되는 multipart/form-data를 처리하기 위한 node.js 미들웨어입니다.
multer-gridfs-storage : 업로드된 파일을 mongoDB에 직접 저장하기 위한 multer용 스토리지 엔진입니다.
gridfs-stream : 더 많은 rebus를 제공하고 사용하기 쉬운 스트림을 제공합니다.

package.json은 다음과 같습니다.

{
  "name": "media-upload-node-mongo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^9.0.2",
    "express": "^4.17.1",
    "gridfs-stream": "^1.1.1",
    "mongoose": "^5.12.9",
    "multer": "^1.4.2",
    "multer-gridfs-storage": "^4.2.0"
  }
}

루트 폴더에 index.js 파일 생성

익스프레스 웹 서버 설정
루트 폴더에서 index.js 파일을 생성합니다.

require("dotenv").config();
const express = require("express");
const app = express();

const port = process.env.PORT || 8080;
app.listen(port, console.log(`Listening on port ${port}...`));

환경 변수 구성
루트 폴더에서 .env 파일을 만듭니다.

DB = "mongodb://localhost/image-upload"

MongoDB 데이터베이스 구성

const mongoose = require("mongoose");

module.exports = async function connection() {
    try {
        const connectionParams = {
            useNewUrlParser: true,
            useCreateIndex: true,
            useUnifiedTopology: true,
        };
        await mongoose.connect(process.env.DB, connectionParams);
        console.log("connected to database");
    } catch (error) {
        console.log(error);
        console.log("could not connect to database");
    }
};

index.js에서 db.js 가져오기 및 호출

require("dotenv").config();
const connection = require("./db");
...
connection();
...
app.listen(port, console.log(`Listening on port ${port}...`));

업로드 미들웨어 구성
루트 폴더에 미들웨어 폴더를 만들고 그 폴더 안에 upload.js 파일을 만듭니다.

const multer = require("multer");
const GridFsStorage = require("multer-gridfs-storage");

const storage = new GridFsStorage({
    url: process.env.DB,
    options: { useNewUrlParser: true, useUnifiedTopology: true },
    file: (req, file) => {
        const match = ["image/png", "image/jpeg"];

        if (match.indexOf(file.mimetype) === -1) {
            const filename = `${Date.now()}-any-name-${file.originalname}`;
            return filename;
        }

        return {
            bucketName: "photos",
            filename: `${Date.now()}-any-name-${file.originalname}`,
        };
    },
});

module.exports = multer({ storage });

여기서 우리가 한 일:

사용자가 이미지를 보낼 때 유효한 이미지 유형인지 확인합니다.

이미지를 데이터베이스에 저장하고 반환합니다.

경로 정의

업로드 경로:
루트 폴더에 경로 폴더를 만들고 해당 폴더 안에 upload.js 파일을 만듭니다.

const upload = require("../middleware/upload");
const express = require("express");
const router = express.Router();

router.post("/upload", upload.single("file"), async (req, res) => {
    if (req.file === undefined) return res.send("you must select a file.");
    const imgUrl = `http://localhost:8080/file/${req.file.filename}`;
    return res.send(imgUrl);
});

module.exports = router;

index.js의 import upload.js 경로를 사용합니다.

require("dotenv").config();
const upload = require("./routes/upload");
...
app.use("/file", upload);
...
app.listen(port, console.log(`Listening on port ${port}...`));

이미지 스트림 및 경로 삭제:
index.js에서

require("dotenv").config();
const upload = require("./routes/upload");
const Grid = require("gridfs-stream");
const mongoose = require("mongoose");
const connection = require("./db");
const express = require("express");
const app = express();

let gfs;
connection();

const conn = mongoose.connection;
conn.once("open", function () {
    gfs = Grid(conn.db, mongoose.mongo);
    gfs.collection("photos");
});

app.use("/file", upload);

// media routes
app.get("/file/:filename", async (req, res) => {
    try {
        const file = await gfs.files.findOne({ filename: req.params.filename });
        const readStream = gfs.createReadStream(file.filename);
        readStream.pipe(res);
    } catch (error) {
        res.send("not found");
    }
});

app.delete("/file/:filename", async (req, res) => {
    try {
        await gfs.files.deleteOne({ filename: req.params.filename });
        res.send("success");
    } catch (error) {
        console.log(error);
        res.send("An error occured.");
    }
});

const port = process.env.PORT || 8080;
app.listen(port, console.log(`Listening on port ${port}...`));

이것이 우편 배달부에서 API를 테스트하는 것입니다.
잘못된 점을 발견하거나 더 나은 점을 발견했다면 댓글로 알려주세요. 나는 당신이 무언가를 배웠기를 바랍니다.