파일 업로드 기능 구현multer 사용하기 - (해시데이터 블록체인에 저장하기 - PART 01)

외울것!

- 파일을 보낼때는 multer를 무조건 쓴다!

- multer를 보내기 위해서 form을 사용하고 ajax에서 특정 값들을 변경해줘야 한다.

 

해시데이터 블록체인에 저장하기

DB에 저장시키고 (await) - 01장

해시값을 뽑아내고 나서 (await) - 02장,

블록체인에 저장 (await) - 03장,

 

3개의 단계 중 아래의 기능을 구현하기 위하여 이번 포스팅을 설명한다.

    let result = await DB.Sql( query, parr);
    console.log(result);
    if(result.affectedRows > 0){
        console.log("DB insert Success")
    }else{
        res.send(JSONResponse.successFalse("DB에 계약서가 저장되지 않았습니다."))
    }

 

1. multer 모듈 설치

$ npm install --save multer

2. 파일 넣는 부분 만들기 Client

input의 type을 file로 해주면 된다.

                            <div style="background-color: white;">
                                <p class="col-md-3 pb-3" style="color: black;">계약서<span style="color: red;">*</span></p>
                                <div class="col-md-9">
                                    <input type="file" name="contract" id="contract" required>
                                </div>
                                <div class="button-group-area mt-40">
                                    <button class="boxed-btn3"  id="filecheck">체크
                                </div>
                            </div>

이제 파일을 넣어서 post요청을 보내도록 script를 만든다.

            $("#filecheck").click(function(){
                $.ajax({
                        type: "POST",
                        url : 'blockchain/file_idx', 
                        success: function(r){
                                alert(r.data.txurl)
                            }
                        })
            })

클릭을 할 시 file_idx로 post요청 전송되는데

이때 multer가 작동하기 위하여서는 몇가지 설정이 필요하다.

1. form 형식을 쓸것  

2. processData, contentType은 false로 둔다. 기본값은 true임으로 바꿔주어야 한다. 

$.ajax({
                    type: "POST",
                    processData: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    url : 'blockchain/file_idx',
                    data : formData,
                    success: function(r){
                        alert("Success!")
                            // alert(r.data.txurl)
                    },
                    error: function(){
                        location.href="/error";
                    }
                });

 

3. multer 설정값 넣어주기 Server Side

multer 모듈을 불러온 후

 

DiskStorage모듈을 사용하여 읽어온 파일에 대한 원본을 저장시킨다.

destination옵션의 경우 어느 폴더안에 업로드 한 파일을 저장할지 결정해준다.

 filename은 파일이름을 정해준다.

이 두 값은 없을시 각각 기본위치와 랜덤 이름을 지정된다.

limit는 올릴 수 있는 최대 파일 사이즈를 제한하는 역할을 한다.

const multer = require('multer');

const upload = multer({
    storage: multer.diskStorage({
      destination: function (req, file, cb) {
        cb(null, 'uploads/blockchain/');
      },
      filename: function (req, file, cb) {
        cb(null, new Date().valueOf() + path.extname(file.originalname));
      }
    }),
    limits: {fileSize : 20*1024*1024}
  });
////사인하는 함수 - to :patent CA

우리 회사에서는 모듈을 여러개를 반복해서 불러와서 쓰면 동시에 올라오기 때문에 diContariner라는 모듈을 만들어서 한번에 모아서 띄우도록 하고 있다. 그러나 중복이 없는 경우에는 따로 이렇게 할 필요가 없다. 

 

4. post 받아와서 실행하기

router.post('/file_idx', upload.single("contract"), async function(req,res){
//내용
})

upload.single("보내려는 file의 name")을 넣어준다.

 

5. Post 요청을 완성 시킨다. 여기서는 기존에 있는 계약에 계약서를 추가하는 기능이기 때문에 update문을 사용하였다.

router.post('/file_idx', upload.single("contract"), async function(req,res){

    let rf = req.file;
    console.log(rf);
    let file_name = rf.originalname;
    let file_path = rf.path;
    let brokerage_idx = 43;
    let parr = [module_path,file_name,file_path,brokerage_idx]
    let query = `
    UPDATE /* ?. file_idx */ brokerage SET contract_name = ? ,contract_route = ? WHERE brokerage_idx=?
    `
    let result = await DB.Sql( query, parr);
    console.log(result);
    if(result.affectedRows > 0){
        console.log("DB insert Success")
    }else{
        res.send(JSONResponse.successFalse("DB에 계약서가 저장되지 않았습니다."))
    }
}

 

터미널에서 성공 문구를 보고 DB에 저장된 파일명 및 경로, 해당 경로에 올라온 파일을 확인하면 끝!

[2020/10/19 10:54:41] [LOG]   DB insert Success

 

IT 유튜브 타임해커 보러가기

www.youtube.com/channel/UCHsRy47P2KlE749oAAjb0Yg?view_as=subscriber