enctype란? enctype의 속성 / nunjucks post로 서버에 이미지 보내기 <form method="post" enctype="multipart/form-data">

enctype  = encoding type

 

말 그대로 인코딩의 형태를 지정해주는 것

<form> 태그와 함께 쓰이며 form 안의 data 가 server로 제출될 때 해당 데이터를 어떻게 인코딩할지 인코딩되는 방법을 명시 한다. 

** method가 post일 경우에만 사용 가능 

 

 

기본 frame 

<form method="post" enctype="속성값">

 

 

enctype="____" 안에 들어갈 속성값 3가지 

속성값	설명
application/x-www-form-urlencoded	기본값, 모든 문자들을 서버로 보내기 전 인코딩됨을 명시
multipart/form-data	모든 문자를 인코딩하지 않음을 명시  보통 form 요소가 파일, 이미지를 서버로 전송 시 주로 사용
text/plain	공백 문자 (space)는 "+" 기호로 변환, 그 외의 나머지 문자는 모두 인코딩되지 않음을 명시

 

예시 

join.html <br/>

회원가입 PAGE <br/>

<form method = "post" action = "/user/join_success" enctype="multipart/form-data">
    <table>
        <tr>
            <td>아이디</td>
            <td>
                <input type ="text" name ="userid" >
            </td>
        </tr>
        <tr>
            <td>비번</td>
            <td>
                <input type ="text" name ="userpw" >
            </td>
        </tr>
        <tr>
            <td>이름</td>
            <td>
                <input type ="text" name ="username" >
            </td>
        </tr>
        <tr>
            <td>성별</td>
            <td>
                <input type ="radio" name ="gender" value="0" checked >남자
                <input type ="radio" name ="gender" value="1" >여자
            </td>
        </tr>
        <tr>
            <td>이미지</td>
            <td>
                <input type ="file" name ="userimage" >
            </td>
        </tr>
    </table>
    <input type="submit" value="회원가입하기">
</form>

 

enctype 사용 시 다운 / 설정해야 하는 것 

 

1. npm install multer 다운

 

2. routers - user - index.js 에 multer 가져오기 / 환경설정 추가 

action = "/user/join_success" -> post('/join_success) 하는 routers - user - index.js 에 코드 추가 

 

routers - user - index.js

const express = require('express');
const router = express.Router();
const userController = require('./user.controller')
const multer=require('multer');                      //추가1

const upload = multer({                                    // 추가2
    storage:multer.diskStorage({
        destination:function(req,file,callback){
            callback(null,'uploads/')
        },
        filename:function(req,file,callback){
            callback(null,new Date().valueOf())
        }
    })
})

router.get('/join',userController.join);
router.post('/join_success', upload.single('img'),userController.join_success);   //추가3
router.get('/login', userController.login);
router.post('/login_check', userController.login_check);
router.get('/logout', userController.logout);
router.get('/info', userController.info);

module.exports=router;

 

3. npm install path 다운

 

4. routers - user - index.js 에 path 가져오기 

const path = require('path');                    //추가1

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))  //추가2
        }
    })
})

추가 2뜻 = 확장자 가져오는 코드 

 

5. uploads 폴더 (이미지 사진 저장되는 폴더) 만들기 

 

6. server on -> 회원가입 -> upload 폴더 확인 -> 사진이 들어와 있어야함 !