본문 바로가기
IT

Day4

by 깻잎쌈 2020. 1. 25.
반응형

파일 업로드.

2개 업로드하는 걸로 html, app.js 수정

 

./public/photo.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>파일업로드 테스트</title>
	</head>
<body>
	<h1>파일업로드</h1>
	<br>
	<form method="post" enctype="multipart/form-data" action="/process/photo">
		<table>
			<tr>
				<td><label>파일</label></td>
                <!-- 2개 //  끝에 multiple도 된다는데 -->
				<td><input type="file" name="photo" /></td>
                <td><input type="file" name="photo" /></td>
			</tr>
		</table>
        <br>
		<input type="submit" value="업로드" name="submit"/>
	</form>
</body>
</html>

 

app.js

var express = require('express'),
    http = require('http'),
    path = require('path');

var bodyParser = require('body-parser'),
    static = require('serve-static'),
    expressErrorHandler = require('express-error-handler'),
    cookieParser = require('cookie-parser'),
    expressSession = require('express-session');

var multer = require('multer'),
    fs = require('fs'),
    cors = require('cors');

var app = express();    


app.set('port', process.env.PORT || 3000);

// https://www.npmjs.com/package/body-parser
app.use(bodyParser.urlencoded({extended:false}));
//  application/json 형식으로 전달된 요청 파라미터를 파싱할 수 있음
app.use(bodyParser.json());

app.use('/public', static(path.join(__dirname, 'public')));
app.use('/uploads', static(path.join(__dirname, 'uploads')));

//req 객체에 cookies 속성 추가 
app.use(cookieParser());
//req 객체에 session 속성 추가 
app.use(expressSession({
    secret:'my key',
    resave:true,
    saveUninitialized:true
}));

//ajax로 요청했을시 CORS (다중서버접속) 지원
app.use(cors());

var storage = multer.diskStorage({
    //업로드한 파일 저장할 폴더 지정
    destination: function(req,file,callback){
        callback(null, 'uploads')
    },
    // 파일이름 중복안되게 현시간(밀리세크단위) 붙여서 파일이름 수정
    filename: function(req,file,callback){
        callback(null, file.originalname+ Date.now())
    }
});

var upload = multer({
    storage: storage,
    limits: {
        // 파일제한 10개, 1G
        files:10,
        fileSize:1024*1024*1024
    }
});


var router = express.Router();

//파일 업로드 
router.route('/process/photo').post(upload.array('photo',2), function(req,res){
    console.log('/process/photo 호출됨 ');
    
    try{
        var files = req.files;
        
        console.dir('#===== 업로드된 1번째 파일정보 ===#');
        console.dir(req.files[0]);
        console.dir('#=======#')
        
        // 현재 파일정보 저장할 변수 선언
        var originalname = '',
            filename = '',
            mimetype = '',
            size = 0;
        
        if(Array.isArray(files)){
            console.log('배열에 들어있는 파일 갯수 : %d', files.length);
            
            for(var index =0; index<files.length; index++){
                
                console.dir('#===== 파일정보 ===#');
                console.dir(req.files[index]);
                console.dir('#=======#')
        
                
                originalname = files[index].originalname;
                filename = files[index].filename;
                mimetype = files[index].mimetype;
                size = files[index].size;
                
                console.log('현재 파일 정보 : ' + originalname + ', ' + filename + ', '
				                        + mimetype + ', ' + size+ '\n');
                console.log(" ");
            }
        }else{
            console.log('파일갯수 : 1');
            
              originalname = files[index].originalname;
              filename = files[index].filename;
              mimetype = files[index].mimetype;
              size = files[index].size;    
        }
        
        //console.log('현재 파일 정보 : ' + originalname + ', ' + filename + ', '
		//		                        + mimetype + ', ' + size);
        
        //클라이언트에게 결과 전송 
        res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
		res.write('<h3>파일 업로드 성공</h3>');
		res.write('<hr/>');
		res.write('<p>원본 파일명 : ' + originalname + ' -> 저장 파일명 : ' + filename + '</p>');
		res.write('<p>MIME TYPE : ' + mimetype + '</p>');
		res.write('<p>파일 크기 : ' + size + '</p>');
        res.write("<br><br><a href ='/public/photo.html'> 업로드 페이지로</a>");
		res.end();
        
    } catch(err){
        console.dir(err.stack);
    }
});


router.route('/process/product').get(function(req,res){
    console.log('/process/product 호출됨');
    
    if(req.session.user){
        res.redirect('/public/product.html');
    }
    else{
        res.redirect('/public/login2.html');
    }
})  ;

//이건 그냥 보여주는 거 밖에 없음 
router.route('/process/showCookie').get(function(req,res){
    console.log('/process/showcookie 호출됨');
    
    res.send(req.cookies);
});

router.route('/process/setUserCookie').get(function(req,res){
    console.log('/process/setUserCookie 호춛됨 ');
    
    // 쿠키설정 
    res.cookie('user', {
        id: 'mike',
        name: '오돔해',
        authorized: true
    });
    
     res.cookie('user2', {
        id: 'mike2',
        name: '오돔해?',
        authorized: true
    });
    
   res.redirect('/process/showCookie');
}); 

router.route('/process/login2').post(function(req,res){
    console.log('/process/login2 처리함');
    
    var paramId = req.body.id || req.query.id;
    var paramPassword = req.body.password || req.query.password;
    
    if(req.session.user){
        console.log('이미 로그인됬의니 상품 페이지로 이동합니다');
        
        res.redirect('/public/product.html');
    }else{
        //세션 저장
        req.session.user ={
            id:paramId,
            name:'구준희',
            authorized: true
        };
        
       res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
	   res.write('<h1>Express 로그인 성공 </h1>');
	   res.write('<div><p>Param id : ' + paramId + '</p></div>');
	   res.write('<div><p>Param password : ' + paramPassword + '</p></div>');
       res.write("<br><br><a href='/process/product'> 로그인됬으니 상품 페이지로 이동 </a>");
        //app.use(/*'/fake',*/ static(path.join(__dirname, 'public')));
        // /public 생략했기때문에 a href='/public/login2.html 에서도 public 생략 
	   res.end();
    
        console.log('id :'+ paramId);
        console.log('pass : '+paramPassword);
        console.log('session : '+ req.session.user.name);
        }
     
});

router.route('/process/logout').get(function(req,res){
    console.log('/process/logout 호출됨');
    
    if(req.session.user){
        //로그인 된 상태
        console.log('로그아웃합니다');
        
        req.session.destroy(function(err){
            if(err){throw err;}
            
            console.log('세션 삭제 및 로그아웃되었음');
            res.redirect('/public/login2.html');
        });
    }else{
        //로그인 안된 상태
        console.log('로그인해주세요 ');
        res.redirect('/public/login2.html');
    }
});

//라우터 객체를 app 객체에 등록
app.use('/', router);

//등록 안된 페이지에 대한 응답 
//app.all('*', function(req,res){
//    res.status(404).send('<h1> Cant find page </h1>');
//});

var errorHandler = expressErrorHandler({
    static: {
        '404':'./public/404.html'
    }
});

app.use(expressErrorHandler.httpError(404));
app.use(errorHandler);


app.listen(app.get('port'), function(){
    console.log('Server started');
})

 

업로드부분 

app.use('/uploads', static(path.join(__dirname, 'uploads')));

var storage = multer.diskStorage({
    //업로드한 파일 저장할 폴더 지정
    destination: function(req,file,callback){
        callback(null, 'uploads')
    },
    // 파일이름 중복안되게 현시간(밀리세크단위) 붙여서 파일이름 수정
    filename: function(req,file,callback){
        callback(null, file.originalname+ Date.now())
    }
});

var upload = multer({
    storage: storage,
    limits: {
        // 파일제한 10개, 1G
        files:10,
        fileSize:1024*1024*1024
    }
});


var router = express.Router();

//파일 업로드 
router.route('/process/photo').post(upload.array('photo',2), function(req,res){
    console.log('/process/photo 호출됨 ');
    
    try{
        var files = req.files;
        
        console.dir('#===== 업로드된 1번째 파일정보 ===#');
        console.dir(req.files[0]);
        console.dir('#=======#')
        
        // 현재 파일정보 저장할 변수 선언
        var originalname = '',
            filename = '',
            mimetype = '',
            size = 0;
        
        if(Array.isArray(files)){
            console.log('배열에 들어있는 파일 갯수 : %d', files.length);
            
            for(var index =0; index<files.length; index++){
                
                console.dir('#===== 파일정보 ===#');
                console.dir(req.files[index]);
                console.dir('#=======#')
        
                
                originalname = files[index].originalname;
                filename = files[index].filename;
                mimetype = files[index].mimetype;
                size = files[index].size;
                
                console.log('현재 파일 정보 : ' + originalname + ', ' + filename + ', '
				                        + mimetype + ', ' + size+ '\n');
                console.log(" ");
            }
        }else{
            console.log('파일갯수 : 1');
            
              originalname = files[index].originalname;
              filename = files[index].filename;
              mimetype = files[index].mimetype;
              size = files[index].size;    
        }
        
        //console.log('현재 파일 정보 : ' + originalname + ', ' + filename + ', '
		//		                        + mimetype + ', ' + size);
        
        //클라이언트에게 결과 전송 
        res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
		res.write('<h3>파일 업로드 성공</h3>');
		res.write('<hr/>');
		res.write('<p>원본 파일명 : ' + originalname + ' -> 저장 파일명 : ' + filename + '</p>');
		res.write('<p>MIME TYPE : ' + mimetype + '</p>');
		res.write('<p>파일 크기 : ' + size + '</p>');
        res.write("<br><br><a href ='/public/photo.html'> 업로드 페이지로</a>");
		res.end();
        
    } catch(err){
        console.dir(err.stack);
    }
});
반응형

'IT' 카테고리의 다른 글

Day6  (0) 2020.01.29
Day5  (0) 2020.01.28
Day 3  (0) 2020.01.24
Day 2  (0) 2020.01.23
Day1  (0) 2020.01.20

댓글