express 이미지 호스팅/프록시 서버

안녕하세요.

이미지 base64를 받아서 그걸 저장하거나 이미지를 수정하고 싶으신가요?

nodejs, express에서 이미지 처리하는 방법에 대해 적어봅니다.

서버 이미지 처리 라우터 코드

// Hello server part

// import
const cors = require('cors')
var express = require('express');
var ImageRouter = express.Router();


// import
const bodyParser = require('body-parser');
ImageRouter.use(bodyParser.json({limit: '50mb'}));
ImageRouter.use(bodyParser.urlencoded({limit: '50mb', extended: true}));



ImageRouter.route("/upload")
    .post( cors(), async (req, res, next) => {
        const newImage = {
            imageName: req.body.imageName,
            imageData: req.body.imageData
        };
        console.log(newImage.imageData);
        // do it yourself

    });
module.exports = ImageRouter;

---

저는 주소에 /image에 route를 걸어놨습니다.

그리고 사용자가 /image로 접근할 경우, 이 모듈이 동작하도록 했습니다.

이 모듈은 이미지를 처리하는 부분입니다. 아래와 같이 bodyParser로 옵션을 추가했습니다.

// import
const bodyParser = require('body-parser');
ImageRouter.use(bodyParser.json({limit: '50mb'}));
ImageRouter.use(bodyParser.urlencoded({limit: '50mb', extended: true}));

---

이 코드는 실제로 웹서버로 요청이 왔을때 처리하는 부분입니다.

보시면 imageName, imageData를 받습니다.

꼭 클라이언트에서는 imageName과 imageData라는 이름으로 값을 보내줘야합니다.

다른걸 보내면 처리하지 못하죠.

이 데이터를 처리하는 부분은 이 코드에 있지않습니다.

아래 참고코드를 보시면 도움이 되실것 같아요.

ImageRouter.route("/upload")
    .post( cors(), async (req, res, next) => {
        const newImage = {
            imageName: req.body.imageName,
            imageData: req.body.imageData
        };
        console.log(newImage.imageData);
        // do it yourself
    });

---

클라이언트

클라이언트는 이 서버에 데이터를 보내려면 라우터에서 받고자 하는 형식으로 보내줘야합니다.

Insomnia라는 프로그램으로 이미지 이름과 base64로 인코딩된 이미지를 보내봤습니다.

(base64로 인코딩하는 방법은 이 포스팅을 참고하세요.)

---

아래 글을 참고하시면 도움이 많이 될거에요. 여러가지 이미지 업로딩 관련 코드 설명 및 코드입니다.

https://codeburst.io/image-uploading-using-react-and-node-to-get-the-images-up-c46ec11a7129

https://github.com/tarique93102/image-upload-app/blob/master/server/routes/image.js

감사합니다.