[Node] Node.js Express에서 파일 업로드 요청 처리 및 DB에 데이터 삽입하기

Node.js Express에서 파일 업로드 요청 처리 및 DB에 데이터 삽입하기

1️⃣ 고객 데이터 사용 요청 처리하기 (server.js)

1) 파일 처리를 위해서 'npm install --save multer' 명령어를 통해 multer 라이브러리를 설치한다.

2) 필요한 라이브러리를 불러온다.

const multer = require('multer');
const upload = multer({dest : './upload'})
// 사용자의 파일이 업로드가 되는 공간으로 설정

3) image 폴더에서 upload 폴더에 접근할 수 있도록해서 사용자가 접근해서 프로필 이미지를 확인할 수 있도록 한다. 사용자 입장에서는 image 폴더에 접근을 하는데 실제 서버에서는 upload 폴더로 맵핑이 되는 것이다.

app.use('/image', express.static('./upload'));

4) post 방식으로 `/api/customers' 경로에 사용자가 고객 추가 데이터를 전송했을 때 이를 처리할 수 있도록 해준다.
(1) sql 구문을 준비한다. 첫 번째 id 값을 제외하고 총 5개의 데이터가 전달될 수 있도록 한다.

app.post('/api/customers', upload.single('image'), (req, res) => {
    let sql = 'INSERT INTO CUSTOMER VALUES (null, ?, ?, ?, ?, ?)'
});

(2) 해당 이미지가 존재하는 이미지 경로를 넣어주고, 사용자는 이미지 경로에 있는 이미지에 접근을 하게 되니까 filename 자체를 DB에 문자열 형태로 넣을 수 있도록 한다. 사용자는 image라는 이름의 변수로 프로필 이미지의 binary 데이터를 서버에 전송을 하게 되니까 그것을 받아오는 것이다.

app.use('/image', express.static('./upload'));

app.post('/api/customers', upload.single('image'), (req, res) => {
    let sql = 'INSERT INTO CUSTOMER VALUES (null, ?, ?, ?, ?, ?)';
    let image = '/image/' + req.file.filename;
    //multer 라이브러리가 filename은 자동으로 겹치지 않게 할당해준다.
});

(3) 나머지 각각의 변수 값도 전달 받을 수 있도록 한다.

app.use('/image', express.static('./upload'));

app.post('/api/customers', upload.single('image'), (req, res) => {
    let sql = 'INSERT INTO CUSTOMER VALUES (null, ?, ?, ?, ?, ?)';
    let image = '/image/' + req.file.filename;
    let name = req.body.name;
    let birthday = req.body.birthday;
    let gender = req.body.gender;
    let job = req.body.job;
});

(4) 실제로 DB에 값을 넣을 때는 각각의 ?에 해당되는 부분에 데이터가 바인딩돼서 들어가게 된다. 따라서 ?에 해당되는 데이터가 무엇인지 파라미터 값을 넣어준다.

app.use('/image', express.static('./upload'));

app.post('/api/customers', upload.single('image'), (req, res) => {
    let sql = 'INSERT INTO CUSTOMER VALUES (null, ?, ?, ?, ?, ?)';
    let image = '/image/' + req.file.filename;
    let name = req.body.name;
    let birthday = req.body.birthday;
    let gender = req.body.gender;
    let job = req.body.job;
    let params = [image, name, birthday, gender, job];
});

(5) 'connection.query'를 통해서 해당 파라미터를 전송할 수 있도록 한다. 그리고 데이터가 입력이 되었다면 관련 메시지를 클라이언트에게 출력할 수 있도록 해준다.

app.use('/image', express.static('./upload'));

app.post('/api/customers', upload.single('image'), (req, res) => {
    let sql = 'INSERT INTO CUSTOMER VALUES (null, ?, ?, ?, ?, ?)';
    let image = '/image/' + req.file.filename;
    let name = req.body.name;
    let birthday = req.body.birthday;
    let gender = req.body.gender;
    let job = req.body.job;
    let params = [image, name, birthday, gender, job];
    connection.query(sql, params,
        (err, rows, fields) => {
            res.send(rows);
        }
    );
});

2️⃣ 고객 데이터 추가해보기

'yarn dev' 명령어를 통해서 서버를 구동하고 이제 고객 추가를 진행해보겠다. 아래와 같이 정상적으로 요청을 받아서 데이터를 추가한 것을 볼 수 있다.

3️⃣ 마무리

이번에는 간단한 방법으로 DB에 새로운 데이터를 추가해서 화면에 보여주는 방법을 진행해보았다.