210511 (회원 가입) 이미지 파일 올리기

input 으로 이미지 파일 올리기

 

 

1. 코드

 

user/index.js 에 추가

const multer = require('multer');	// npm install multer

const path = require('path');       //npm install path

 

multer 사용 위해 세팅 하는 부분

이 부분은 외우기 or 가져다 쓰기 

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

---

 join.html

<tr>
    <td>이미지</td>
    <td><input type="file" name="img"></td>
</tr>

이미지를 받는 부분을 html 에 추가해준다. type = "file"로 받을 수 있다.

 

---

user/index.js

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

이 부분을 추가해준다.

 

@@ 왜 join_success 에 넣었나??

join 에 넣지 않고?

-> join은 /join 이라는 uri에 도착했을때 html을 열어줄뿐 데이터를 처리하는건 아니기 때문

-> 데이터를 넘길 준비를 하는 부분이 join

-> submit 버튼을 눌렀을때 form에 있는 data를 가지고 join_success 로 가게 된다.

 

@@ 왜 이렇게 썼나?

<td><input type="file" name="img"></td>

이렇게 했기 때문에

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

이렇게 img로 넣어주면 된다.

---

 

user.controller.js

let join_success = async (req,res)=>{
    let userid = req.body.userid;   // 1. 이렇게 변수 설정하고 
    let userpw = req.body.userpw;
    let username = req.body.username;
    let gender = req.body.gender;
    //let userimage = req.file.path;   // req.file -> Object 여기서 필요한건 path 정보
    let userimage = req.file == undefined ? '':req.file.path;

    await User.create({
        userid,     // 2. userid : userid 와 같은 구문 - 이건 js 구문이라서 받아들여야함.
        userpw,
        username,
        gender,
        userimage
    });
    res.render('./user/join_success.html',{
        userid,
        username,
    });
}

join_success 부분에 userimage 도 추가해서 db로 보내준다.

 

join_success

db 처리하고

완료되면 다른 페이지로 redirect 한다.

 

이때ㅡ

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

이 부분은 userimage가 빈 값일 때 undefined 가 되면 db에 ' ' 빈 값을 넣어주고 

그게 아니고 파일이 있는 경우면 파일의 경로를 넣어주면 된다.

---

---

 

이제 db에 img 저장하는걸 배워보자

 

multer를 이용해서 db에 img를 저장하는 원리

 

* 이미지 처리 방법

엄청나게 긴 텍스트로 이미지가 오는데 이걸 multer 로 가공해준다.

 

 

* 이미지를 dB에도 저장하나?

이미지는 dB에 긴 텍스트로 저장하지 않음

파일 서버라는 걸 만들어서 파일을 저장하는 공간을 하나 만든다.

하지만 우리는 서버 한대여도 돌아가기때문에 서버에 저장한 것이다.

dB에는 파일 경로만 저장하면 된다. (파일 서버가 있다고 해도 파일 경로만 저장하는것이다.)

 

 

 

 

 

3. 폴더 생성

uploads 폴더 생성

 이 부분에 이미지가 추가가 된다.

 

 

 

4. 이미지 db에 저장하기

user.controller.js

let join_success = async (req,res)=>{
    ..
    //let userimage = req.file.path;   // req.file -> Object 여기서 필요한건 path 정보
    let userimage = req.file == undefined ? '':req.file.path;
    ..
}

await User.create({
        userid,     // 2. userid : userid 와 같은 구문 - 이건 js 구문이라서 받아들여야함.
        userpw,
        username,
        gender,
        userimage       // 이 부분 추가하고
    });

    res.render('./user/join_success.html',{
        userid,
        username,
});

다시 서버 열고 회원가입하고

db에서 보면

이미지 경로가 추가된걸 확인할 수 있다.

 

 

예외처리

 

* 만약 회원가입시 이미지를 안넣는다면?

실행자체가 안되는데 이 부분을 예외처리 해줘야함

 

user.controller.js

 

이 부분을 조건문으로 걸어줘야 한다.

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

undefined : 빈 값

빈 값이 아니면 path 가 들어가도록 한다.