[Node] File BLOB로 저장하기

 

 

AXIOS으로 파일 보내기

axios로 파일을 보내기 위해서는 간단하게 알아야 할 것이 있다.

FormData라는 객체이다.

 

Object처럼 Key와 Value로 이루어져 있지만, 데이터를 넣는 방법은 append를 이용해야 한다.

let formData = new FormData();
console.log(formData);
formData.append('input', this.inputText);
formData.append('inputFile', document.getElementById('input File ID').files[0]);

여기서 중요한 점은 FILE을 formData안에 append 한다는 부분이다.

 

try {
    axios.post('http://localhost:3000/fileInput', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
    .then(res => {
        console.log(res);
    })


}
catch(error) {
    console.error('err: ', error);
}

담겨진 formData를 axios의 post 함수를 통해 값을 전송한다.

값을 보낼 때는, headers값에 'Content-Type'을 'multipart/form-data'라고 선언을 해줘야 한다.

 

 

 

NODE의 파일 저장하기 - DB( BLOB 저장 방식 )

NODE에서 파일 받기 위해서는 'multer'가 필요하다.

multer는 NODE에서 'express'를 사용하게 될 경우, 가장 호환성 있게 파일을 받을 수 있는 lib 중 하나이다.

 

# multer를 npm을 통해서 설치하기
npm install multer

 

 

const multer = require('multer');

const storage = multer.memoryStorage(); // 메모리에 파일을 저장
const upload = multer({ storage: storage });

node의 상단 부분에 multer에 대한 설정을 진행한다.

이는 multer에 잠시 file을 임시 저장하는 방식이며, 이를 이용하여 DB에 임시저장하는 방식을 이용하게 되었다.

 

상단에는 해당 사진처럼 정의를 하면 된다.

 

 

multer에 저장 된 file은 NODE에서 mapping을 불러올 때 이용하게 된다.

 

//이미지 저장하기
app.post('/fileInput', upload.single('inputFile'), (req, res) => {
    console.log('fileInput');
    console.log(req.body);
    console.log(req.file);
    let text = req.body.input;
    let fileBuffer = req.file.buffer;       //FILE 버퍼 넣기
    let fileName = req.file.originalname;   //파일 원본 빼기

    let sql = 'INSERT INTO FILE_TABLE (FILE_TEXT, FILE, FILE_NAME)'
    +'VALUES( ?, ?, ?)';
    connection.query(sql, [text, fileBuffer, fileName], (err, results, fields) => {
        if(err) throw err;
        console.log(results);
    })
})

이를 가능하게 만드는 것이 upload.single('inputFile') 이다.

해당 inputFile은 axios의 formData를 보낼 때, append에 담은 key 값이다.

만약 key값이 일치하지 않을 경우, 찾을 수 없으므로 값이 제대로 나오지 않으면 key값의 일치여부를 판단해봐야 한다.

 

 

 

✔️ DB에 저장 할 때는 BLOB 타입이 필요하다.

- 해당 파일은 req.file.buffer로 불러온 명칭을 BLOB 타입의 컬럼과 일치시키면 된다.

- 여기 예시의 컬럼에서는 FILE의 컬럼명이 BLOB 타입을 지니고 있다.

 

파일이 정상적으로 저장 된다면, 다음과 같은 형태로 저장되는 것을 확인할 수 있다.

 

 

 

 

 

 

BLOB 파일 꺼내기

//이미지 파일 꺼내기
app.get('/getImage', (req, res) => {
    let responseData = {};

    let sql = 'SELECT * FROM FILE_TABLE';
    connection.query(sql, (err, rows) => {
        if(err) throw err;
        if(rows[0]) {
            responseData.status = 'ok';
            responseData.data = rows.map(row => {
                console.log(row);
                return row.FILE.toString('base64')
        });

            res.setHeader('Content-Type', 'application/json');
            res.json(responseData);
        } else {
            responseData.status = 'none';
            res.json(responseData);
        }
    })
})

파일을 꺼낼 때, 중요 부분이 있다면 두 개의 빨간 네모가 정해져 있는 부분이라고 할 수 있다.

 

1. BLOB를 컴퓨터가 읽을 수 있는 base64 형태로 치환해야 한다.

2. BLOB를 json으로 변형시키는 것은 비효율적이지만, 해당 값을 json 형태로 보내면서 값이 깨지지 않기 위해서는 Header에 다음과 같은 설정을 해야 한다.

 

 

보내진 base64를 console.log로 찍을 경우, 다음과 같은 코드가 발생하게 된다.

 

이를 다시 읽을 수 있는 코드로 변형시켜서 img에 삽입을 시켜보자.

 

해당코드를 img가 정상적으로 읽기 위해서는 다음과 같은 코드 양식이 필요하다.

 

 

`data:image/jpeg;base64, ${변수 명}`

해당 base64를 src에 위와 같이 삽입할 경우, 데이터를 읽을 수 있게 도와준다.

 

axios.get('http://localhost:3000/getImage')
  .then(res => {
      // 응답에서 이미지 데이터를 Base64로 인코딩
      console.log(res.data);
      let imageSrc = `data:image/jpeg;base64,${res.data.data[1]}`;
      document.getElementById('imgTest').src = imageSrc;
  })
}

해당 id에 src를 JavaScript를 통해서 재정의 시키면 된다.

 

 

해당 코드를 통해서 간단한 캐릭터가 나오는 것을 확인할 수 있다.