안경잡이개발자

728x90
반응형

  이번 시간에는 사용자가 보낸 고객 데이터를 Node.js Express로 처리하여 서버의 특정한 폴더에 파일 업로드 처리를 하는 방법에 대해서 알아보도록 하겠습니다. 이후에 고객 정보를 실제 MySQL 데이터베이스(Database)에 삽입하고, 업로드 폴더를 클라이언트에서 접근할 수 있도록 하여 고객이 이를 확인할 수 있도록 처리하는 시간을 가져 볼 것입니다.


▶ CustomerAdd.js


  따라서 가장 먼저 CustomerAdd.js의 handleFormSubmit() 함수를 수정해주도록 합시다. 데이터를 전송한 이후에는 고객 추가 양식(Form)을 비운 뒤에 페이지를 새로고침(Refresh)하여 등록된 고객 데이터를 확인하는 것입니다. 실제 배포 버전에서는 전체 페이지를 새로고침 하는 방향으로 코딩을 하면 안 되지만 빠른 테스트를 위해서 잠시 이와 같이 코딩해주도록 하겠습니다.


handleFormSubmit(e) {

e.preventDefault()

this.addCustomer()

.then((response) => {

console.log(response.data);

})

this.setState({

file: null,

userName: '',

birthday: '',

gender: '',

job: '',

fileName: ''

})

window.location.reload();

}



  이제 node.js에서 이러한 파일 업로드 요청을 처리하시면 됩니다. 이 때는 multer 라이브러리를 사용하시면 됩니다. 따라서 루트 폴더로 이동하셔서 npm install --save multer 명령어를 수행하신 뒤에 다음 소스코드를 작성합니다.


▶ server.js


const fs = require('fs');

const express = require('express');

const bodyParser = require('body-parser');

const app = express();

const port = process.env.PORT || 5000;

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: true }));


const data = fs.readFileSync('./database.json');

const conf = JSON.parse(data);

const mysql = require('mysql');


const multer = require('multer');

const upload = multer({dest: './upload'})


const connection = mysql.createConnection({

host: conf.host,

user: conf.user,

password: conf.password,

port: conf.port,

database: conf.database

});

connection.connect();


app.get('/api/customers', (req, res) => {

connection.query(

'SELECT * FROM CUSTOMER',

(err, rows, fields) => {

res.send(rows);

}

)

});


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);

}

)

});


app.listen(port, () => console.log(`Listening on port ${port}`));


  이제 루트 폴더에서 upload 폴더를 생성해 주세요. 또한 사용자가 업로드한 파일은 깃 허브(Git Hub)에 공개적으로 올라가면 안 된다는 점에서 .gitignore에도 이 내용을 추가해주도록 합니다.


# upload

/upload


※ 실행 결과 ※




  실제로 고객 데이터와 파일이 업로드 된 이후에 새로고침이 자동으로 이루어지면서 추가된 고객 정보를 확인할 수 있습니다.



  결과적으로 다음과 같이 upload 폴더에서도 업로드 된 파일을 확인할 수 있습니다. 파일의 이름은 multer 라이브러리에 의해서 중복되지 않는 형태로 자동으로 바뀌어서 올라가게 됩니다.



  (+ 추가)


  실제로는 이러한 이미지 업로드 기능은 AWS S3과 같은 서비스를 이용해서 저장하면 매우 효과적입니다. 현재 소스코드 상으로는 데이터베이스와 서버에 업로드 된 이미지가 완전히 일치한다는 것을 보장하기 어렵기 때문입니다. 그리고 현재 소스코드에서는 새로운 고객 데이터가 등록된 이후에, 이를 확인하기 위해 전체 페이지를 새로고침(Refresh)하지만 실제로는 다시 고객 목록 데이터를 가져오는 식으로 코드를 동작시켜야 합니다.

728x90
반응형

Comment +6

  • RAY SONG 2019.06.22 14:40

    고객 데이타 읽어오는 것 성공했는데, 고객데이타 추가시 SERVER쪽에서 console.log(name)을 하면 undefined가 나오는데, 혹시 이유를 알 수 있을지요?
    고객 추가에서 post로 잘 넘어간거 확인했거든요....거의 1주일을 씨름해도 몰라서 여기에 글을 올립니다. 한 번 알려주시면 너무 고맙겠습니다.

    • Lee 2020.03.30 18:43

      혹시 문제 해결하셨나요??
      전 몇주째 해결 못하고 있어서요...

    • gdpark 2020.06.27 22:49

      CustomerAdd.js 부분에서 addCustomer 함수내에 데이터와 state 를 매칭하는 부분에서 아래와 같이 name 값을 state.userName으로 변경해보세요.

      formData.append('name', this.state.userName)

  • 이동건 2020.02.19 14:14

    안녕하세요! 강의 잘 보았습니다!

    한 가지 질문할 게 있는데 혹시 대답해주실 수 있을까요? ㅠㅠ

    multer를 이용해서 이미지를 db에 저장하는 것 까지 했습니다.

    현재 웹 페이지를 호스팅 중이라 8080 페이지에는 웹의 주소가 적혀있고 서버는 5000에서 받는중인데요,

    url 주소 쓰고 / 후에 db에 저장된 multer 이름을 붙이면 저장이 되어야하는데 안되네요 ㅠㅠ

    서버를 8080에서 돌리면 사진이 잘 저장됩니다!

    혹시 8080에 웹 페이지를, 5000에 서버를 돌리면서 사진을 받아올 방법을 알고 계실까요? ㅠㅠ

    다음은 사진을 받아오는 소스코드입니다.

    ID 값으로는 DB의 multer 파일 이름이 들어옵니다!

    app.get('/api/download/server', function(req, res) {

    let uID = req.query.id;
    filepath = '../../upload/instructor/' + uID;

    res.download(filepath);
    });

    이 블로그 덕분에 실력이 정말 많이 늘었습니다! 감사합니다!

    답변 기다리겠습니다!

  • 이동건 2020.02.19 14:16

    밑에 댓글 비밀번호를 잊어버렸습니다 ㅠㅠ 혹시 답글 달아주신다면 여기 부탁드립니다

  • 김종민 2021.02.27 16:07

    관리자의 승인을 기다리고 있는 댓글입니다