회원가입 이미지 저장 (multer사용)

DEFAULT: npm install multer && path

 

사용할 router에 선언을 해주고 multer를 사용하는 function을 만들어준다.
넣어줄 function은 그냥 외우는게 좋을듯

크게 이해하자면 이미지는 text형식으로 저장해서 움직이는 거.

 

const upload = multer({
    storage: multer.diskStorage({
        destination:function(req,file,callback){
            callback(null,'uploads/') // uploads => 폴더명
        },
        filename:function(req,file,callback){
            callback(null,new Date().valueOf() + path.extname(file.originalname))
        }
    }),
});

 

이런내용으로 만들어진 function을 결과값을 처리해주는 URL에 두번째 인자값(midwear)으로 넣는다.

[function명].single('[input name]')

 

router.post('/join_success',upload.single('img'),controller.join_success);

 

회원가입할때 파일 업로드

 

이렇게 하고 이미지파일을 넣으면 uploads라는 파일에 이미지가 업로드됨.

 

파일이름은 filename function에서 설정해준대로 저장된다.

 

이렇게 이미지가 저장되면 이미지가 TEXT로 변경되서 저장이 되는건데 이상태 그대로 DB에 저장을 하면 TEXT 길이가 너무 길어서 과부화가 걸릴 수 있음.
그래서 DB에는 파일 경로만 저장한다.

 

 

파일경로 가지고 오는 법

 

let join_success = async (req, res) => {
    let userid = req.body.userid;
    let userpw = req.body.userpw;
    let username = req.body.username;
    let gender = req.body.gender;
    let userimage = req.file.path; //req.file => 객체

    try {
        let results = await User.create({ userid, userpw, username, gender,userimage})
    } catch(e){
        console.log(e);
    }
    res.render('./user/join_success.html',{ userid, username,});
}

 

여기서 req.file은 객체다. 이 객체에서 아까전에 위에서 미리 설정해둔 path를 가지고 오고 그 path 를 userimage변수에 담아 DataBase로 보내준다.

 

성공하면

 

 

이렇게 db에 경로로써 저장이 된다.

 

문제점

그런데 이렇게 설정을 해놓으면 이미지를 안 넣고 회원가입을 했을때 path값이 없으므로 오류가 생긴다

내용은 대충 userimage가 undefined다 이런 내용

 

이걸 해결하기 위해서 userimage를 변수로 설정해 줄때 if문으로 구분값을 넣어서 설정해준다.

 

let userimage = req.file == undefined ? '' : req.file.path

 

이러면 image를 안넣었을때는 저절로 값이 req.file로 되면서 path값이 필요가 없게되서 오류가 안생기고 빈값으로 저장됨