[백엔드] React Native에서 Node.js로 이미지 보내기(feat. multer)

오늘은 프론트(react native)로부터 이미지를 받아와 저장할 것이다.

 

이렇게 찍히는 이미지들을 저장해야 하는 것인데...열심히 검색을 해보았다.

 

krpeppermint100.medium.com/js-react%EC%97%90%EC%84%9C-express%EB%A1%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%8C%8C%EC%9D%BC-%EC%98%AC%EB%A6%AC%EA%B8%B0-multer-f398adf6dbdd

[JS]React에서 Express로 이미지 파일 올리기(multer)

velog.io/@nomadhash/TIL-multer%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-feat.React-x-Node-js

[사이드 프로젝트] multer를 이용한 이미지 업로드 feat.React x Node js

mfact12.tistory.com/entry/React-Native-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%EC%98%88%EC%A0%9C

React Native 파일 업로드 예제

kkumalog.tistory.com/60

[Node.js] Using multer to upload image

m.blog.naver.com/sssang97/221642022702

[Express.js] Multer 모듈과 파일 업로드

multer라는 미들웨어를 쓰는 것 같다. 시작해보자

 

npm i multer --save

설치를 하구

 

routes/paper-upload.js

import express from "express";
const router = express.Router();
const multer = require("multer");

// multer-optional
var storage = multer.diskStorage({
 destination: (req, file, cb) => {
   cb(null, "uploads/");
 },
 filename: (req, file, cb) => {
   cb(null, `${Date.now()}_${file.originalname}`);
 },
});
var upload = multer({ storage: storage });

// Router
router.post("/", upload.array('채점'), (req, res) => {
    try {
        res.send({ //파일 정보 넘김
            message: "upload success",
            status: 'success',
            data: {
                files: req.files
            }
        });
    } catch (err) { //무언가 문제가 생김
        res.send({
            message: "ERROR",
            status: 'fail'
        })
    }
});

module.exports = router;

 

여러 블로그에 있는 코드들을 대충 이해해서 짜깁기 해봤다...

multer를 안지 2시간밖에 안돼서 잘은 모르겠으나 내가 이해한 걸 대충 정리해보겠다.

 

 destination: (req, file, cb) => {
   cb(null, "uploads/");
 }

이건 저장경로를 지정하는거라고 한다.

그니까 uploads란 폴더를 생성하고 거기에 파일이 저장되게끔 하는 것이다.

 

 filename: (req, file, cb) => {
   cb(null, `${Date.now()}_${file.originalname}`);
 }

이거는 파일이름을 지정하는 건데, 프론트랑 이야기를 좀 해봐야할 것 같다.

지금은 '현재시각_파일의원래이름'으로 저장되도록 했다.

 

router.post("/", upload.array('채점'), (req, res) => {
    try {
        res.send({ //파일 정보 넘김
            message: "upload success",
            status: 'success',
            data: {
                files: req.files
            }
        });
    } catch (err) { //무언가 문제가 생김
        res.send({
            message: "ERROR",
            status: 'fail'
        })
    }
});

이미지 업로드는 post로 진행되는데 여러 장의 이미지를 받을 것이기 때문에 upload.array로 작성했다.

하나만 받는다면 upload.single로 하라고 하더이다.

 

일단 대충 이렇게 해놓았는데, 프론트에서 문제없이 작동하면 좋겠다.

만약 문제가 생기면 추가로 이 아래 글을 더 쓰도록 하겠다.