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

추가한 항목 반영

react는 기본적으로 추가하기를 눌러도 전체가 새로고침되지 않는다.
특정 변화된 내용만 수정된다.

따라서, 고객 추가를 완료하면 고객 데이터를 다시 서버로부터 받아와서 화면에 출력해야한다.

실제 배포 버전에서는 전체 페이지의 모든 데이터를 새로고침하는 코딩을 하면 안되지만, 빠른 테스트를 위해 이렇게 코딩하겠다.

handleFormSubmit 수정

handleFormSubmit = (e) => {
  e.preventDefault();
  this.addCustomer()
    .then((response) => {
    console.log(response.data);
  })
  this.setState({
    file: null,
    userName: '',
    birthday: '',
    gender: '',
    job: '',
    fileName: ''
  })
  window.location.reload();
}

server.js

서버 종료한다.
파일 처리를 위한 라이브러리를 설치한다.

npm install --save multer

서버를 시작한다.

파일 업로드를 위한 설정을 진행한다.

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

post 코드를 작성한다.
사용자가 image로 접근해도 서버의 upload로 접근하게 된다.

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

업로드 내용을 숨겨야하므로 gitignore에도 추가해준다.

multer를 통해 이미지가 중복되지 않게 자동으로 들어간다.