폴더 구조

[HTML]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <form id="form01" name="form01" enctype='multipart/form-data' action='test.php' method="post">
      <input type="hidden" id="img_count" name="img_count">
      <input type="file" class="file-btn" id="file-btn-0">
      <div class="swiper-wrapper"></div>
    </form>
    <button type="button" id='sendButton'>send</button>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>
 
  

[javascript]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$(document).ready(function(){
    // 첨부 파일 개수 변수
    var index = 0;
    // 첨부 파일
    $(document).on('change','.file-btn', function(){
        console.log("감지");
        var target = $(this)[0];
        
        if(target != null){
            //------------------이미지 확장자 검사 시작--------------------------------//
            var fileNM = $(this).val();
 
            var ext = fileNM.slice(fileNM.lastIndexOf(".") + 1).toLowerCase();
 
            if (!(ext == "gif" || ext == "jpg" || ext == "png")) {
                alert("이미지파일(.jpg, .png, .gif)만 업로드 가능합니다.");
                return false;
            }
            //------------------이미지 확장자 검사 종료--------------------------------//
        
            var fileList = target.files ;
        
            // 파일리더기 생성
            var reader = new FileReader();
            
            // 파일 위치 읽기
            reader.readAsDataURL(fileList [0]);
            
            //로드 한 후 이미지 요소 설정(스타일,url)
            reader.onload = function  (e) {
                // 이미지 미리보기
                
                var img_result = '<input type="hidden" id="file'+index+'" name="file'+index+'" value="'+e.target.result+'">';
                $('.swiper-wrapper').append(img_result);
                
                
            };
            // 이미지 파일 첨부 버튼 추가 하기
            // 새로운 div 생성
            var div = document.createElement('div');
 
            index++;
            $("#img_count").val(index);
        }
    });
 
    $('#sendButton').on('click',function(){
        $('#form01').submit();
    });
})
  

[php]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
$i = 1;     // 업로드해야할 이미지 파일이 여러개이면 while문으로 돌려야 함..
$upload_dir = "../test01/image/";
$file_name = "image";
 
if (preg_match('/^data:image\/(\w+);base64,/', $_POST['file'.$i], $type)) {
    $data = substr($_POST['file'.$i], strpos($_POST['file'.$i], ',') + 1);
    $type = strtolower($type[1]); // jpg, png, gif
    
    
    $data = base64_decode($data);
 
    if ($data === false) {
        throw new Exception('base64_decode failed');
    }
    
    $image = imagecreatefromstring($data);
 
    // 이미지의 가로 세로 구하기
    $size = getimagesize($_POST['file'.$i]);
 
    // 이미지 회전 방법
    if($size[0] > $size[1]){        // 이미지 가로크기가 세로보다 크다면 270도 만큼 회전
        $image = imagerotate($image, 270, 0);
    }
    
    // header('Content-type:image/jpeg');
    // 이미지 저장 이름 및 저장 경로
    $directory = $upload_dir."".$file_name.".{$type}";
    if($type == 'jpeg'){ 
        $saveImage = imagejpeg($image, $directory); 
    }else if($type == 'png'){
        $saveImage = imagepng($image, $directory); 
    }else if($type == 'gif'){
        $saveImage = imagegif($image, $directory); 
    }
    
    imagedestroy($image);
 
    if($saveImage){
        echo "success";
    }else{
        echo "fail";
    }
    
    
} else {
    throw new Exception('did not match data URI with image data');
}
?>
 
  

'WAMP > php' 카테고리의 다른 글

file_put_contents( )함수를 이용한 파일 저장  (0) 2019.09.18
php에서 mail 보내기  (0) 2019.08.30
php에서 curl 사용하기  (0) 2019.08.30
로그 파일 생성  (0) 2019.08.28
wamp [회원 정보 수정] 기능만들기  (0) 2019.05.30

[app.js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
 
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var paintingRouter = require('./routes/painting');
 
var app = express();
 
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');                
app.engine('html', require('ejs').renderFile);
 
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
 
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/painting', paintingRouter);
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next();
});
 
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
 
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
 
module.exports = app;
  

[routers/users.js]

1. GET방식

1
2
3
4
5
6
7
8
9
10
var express = require('express');
var router = express.Router();
var db = require('../connectDB');
 
/* GET users listing. */
router.get('/', function(req, res, next) {
  db.query('SELECT * FROM ProductTable WHERE prCode=?',req.query.num,(err, rows, fields) => {
    res.send(rows);
  });
});
 
  

2. POST방식

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function sendPost(number){
    fetch(
        `/users`,        // URL
        {
            method: 'post',         // method
            body: JSON.stringify({    // URL로 보낼 데이터
                num: number        
            }),
            headers:{        // json data를 보내기 위한 
                'Content-Type': 'application/json'
            }}
        ).then(function(response){
            return response.json();
        }).then(function(json){
            console.log(json);
        });
}
 
  

[routers/users.js]

1
2
3
4
5
6
7
8
9
10
11
12
var express = require('express');
var router = express.Router();
var db = require('../connectDB');
 
/* POST users listing. */
router.post('/', function(req, res, next) {
  var number = req.body.num;
  db.query('SELECT * FROM ProductTable WHERE prCode=?',req.body.num,(err, rows, fields) => {
    res.send(rows); 
  });
});
module.exports = router;
  

'NodeJS > express' 카테고리의 다른 글

express 설치 + mysql,session 모듈 추가(centos7 기준)  (0) 2020.01.28
express 웹서버에서 mysql 연결 및 사용하기  (0) 2019.09.26
뷰엔진을 jade에서 html로 바꾸기  (0) 2019.09.26
express js 설치 시작하기(윈도우 기준)  (0) 2019.09.26

우선 connectDB.js파일을 만듭니다.

1
2
3
4
5
6
7
8
9
10
11
12
var mysql = require('mysql');
 
const connection = mysql.createConnection({
    host: 'ip주소',
    user: 'mysql 유저명',
    password: 'mysql 비번',
    port: 'mysql 포트번호',
    database: '접속할 디비명' 
});
connection.connect();
 
module.exports = connection;
  
 

connectDB.js파일에 위와 같은 구문의 MYSQL 접속 정보를 입력하고 저장합니다.

참고로 mysql 모듈이 없으면 에러가 발생합니다. 그러므로 아래와 같음 명령어로 mysql 모듈을 설치해 줍니다.

1
npm install mysql
  

사용법

app.js이든 router 이든 아래와 같이 connectDB.js를 임포트 하여 

1
2
// connectDB.js 임포트
var db = require('../connectDB');
  

다음과 같이 db에 쿼리문을 날릴수 있다.

1
2
3
db.query('쿼리문',(err, rows, fields) => {
  res.send(rows);
});
 
  

 

'NodeJS > express' 카테고리의 다른 글

express 설치 + mysql,session 모듈 추가(centos7 기준)  (0) 2020.01.28
express Router에서 GET,POST 방식의 데이터 주고 받기(feat. mysql)  (0) 2019.09.26
뷰엔진을 jade에서 html로 바꾸기  (0) 2019.09.26
express js 설치 시작하기(윈도우 기준)  (0) 2019.09.26

아래와 같은 구문은 뷰엔진으로 확장자가 jade인 파일을 보여주겠다는 의미입니다.

[app.js]

1
2
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
  

저는 jade의 들여쓰기가 너무 어이가 없어서 저에게 편한 html파일을 사용하려 합니다.

express에서 html를 사용하려면 ejs라는 모듈이 필요합니다. 바로 설치 해줍니다.

1
npm install ejs
  

설치를 하고 뷰 엔진을 ejs로 바꾸어 줍니다.

1
2
3
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
  

이렇게 하면 라우터에서 아래와 같은 구문으로 index.html로 넘어갑니다.

1
2
3
router.get('/', function(req, res, next) {
  res.render('index.html');
});
 
  

 

'NodeJS > express' 카테고리의 다른 글

express 설치 + mysql,session 모듈 추가(centos7 기준)  (0) 2020.01.28
express Router에서 GET,POST 방식의 데이터 주고 받기(feat. mysql)  (0) 2019.09.26
express 웹서버에서 mysql 연결 및 사용하기  (0) 2019.09.26
express js 설치 시작하기(윈도우 기준)  (0) 2019.09.26

express js는 nodejs의 프레임워크 중 하나이므로 nodejs가 설치 되어있어야 합니다.

1,3번째 줄의 코드는 nodejs와 npm 버전 확인...

1
2
3
4
node --version
v10.16.3
npm --version
6.9.0
 cs

nodejs와 npm이 설치가 되어 있다면 원하는 경로로 들어가서 아래의 명령어 입력

1
npm install express -g
  

이후 express myapp 명령어를 입력하면 해당 경로에 'myapp'이라는 폴더가 만들어 지며

1
express myapp
  

myapp 폴더안에는

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/myapp
  ⌊ /bin
      ⌊ www
  ⌊ /public
      ⌊ /images
      ⌊ /javascripts
      ⌊ /stylesheets
  ⌊ /routes
      ⌊ index.js
      ⌊ users.js
  ⌊ /views
      ⌊ index.jade
  ⌊ app.js
  ⌊ package.json
  

와 같은 구조로 파일들이 생성되어있는것을 보게될것입니다.

 

잘 설치가 되었는지 구동을 해보자면

1
2
npm install
npm start
  

위와 같은 명령어를 실행 하고

url에 localhost:3000을 입력하면 제대로 작동되는 것을 확인할 수 있습니다.

'NodeJS > express' 카테고리의 다른 글

express 설치 + mysql,session 모듈 추가(centos7 기준)  (0) 2020.01.28
express Router에서 GET,POST 방식의 데이터 주고 받기(feat. mysql)  (0) 2019.09.26
express 웹서버에서 mysql 연결 및 사용하기  (0) 2019.09.26
뷰엔진을 jade에서 html로 바꾸기  (0) 2019.09.26
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if (preg_match('/^data:image\/(\w+);base64,/', $_POST['file_'.$i], $type)) {
    $data = substr($_POST['file_'.$i], strpos($_POST['file_'.$i], ',') + 1);
    $type = strtolower($type[1]); // jpg, png, gif
 
    $data = base64_decode($data);
 
    if ($data === false) {
        throw new \Exception('base64_decode failed');
    }
} else {
    throw new \Exception('did not match data URI with image data');
}
 
$date = date("Ymd");
$file_name = $date."02".$i;                                // 파일명
$upload_dir = $image_dir.'/images/member/'.$userID.'/';    // 저장 경로
 
file_put_contents($upload_dir."".$file_name.".{$type}", $data);
  

 

'WAMP > php' 카테고리의 다른 글

이미지 회전 후 저장[html, javascript(jQuery), php]  (0) 2019.11.14
php에서 mail 보내기  (0) 2019.08.30
php에서 curl 사용하기  (0) 2019.08.30
로그 파일 생성  (0) 2019.08.28
wamp [회원 정보 수정] 기능만들기  (0) 2019.05.30

+ Recent posts

티스토리툴바