connect to api at app.js,

debug upload button upload.html

connect to api at app.js,
debug upload button upload.html
임연수
Commit d5db436947daf362c3a68a2ad4ffd22eda163306 d5db4369 1 parent 887c2e92
Showing 4 changed files with 99 additions and 98 deletions
.gitignore
app.js
uploads/mypic.jpg
views/upload.html
--- a/.gitignore
View file @d5db436
+++ b/.gitignore
View file @d5db436
 node_modules/
 .idea/
-package-lock.json
-uploads/mypic.jpg
\ No newline at end of file
+package-lock.json
\ No newline at end of file
--- a/app.js
View file @d5db436
+++ b/app.js
View file @d5db436
@@ -2,20 +2,16 @@ var express = require('express');
 var bodyParser= require('body-parser');//post할때 필요
 var multer = require('multer'); //업로드할 때 필요
 var request = require('request');
-var app=express();
+var http = require('http');
-
+var vhost = 'nodejsapp.local';
-var _storage = multer.diskStorage({ //이 객체의 프로퍼티는 2개갖고 있다.
+var port = process.env.PORT || 8080;
-   destination: function (req, file, cb) {
+var ip = process.env.IP || "localhost";
-     cb(null, 'uploads/');//업로드 위치를 저장하는 path함수
+
-   },
-   filename: function (req, file, cb) {
-    // cb(null, file.originalname); //저장할 파일명
-      cb(null, 'mypic.jpg');
-   }
- })
- var upload = multer({ storage: _storage})
-app.locals.pretty = true;
+var app= express();
+
+app.set('port', port);
+app.locals.pretty = true;
 app.engine('html', require('ejs').renderFile);
 app.use(express.static('public'));
 app.use('/user',express.static('uploads'));
@@ -23,33 +19,61 @@ app.set('views','./views');
 app.set('view engine', 'html');
 app.use(bodyParser.urlencoded({extended:false}));
-app.get('/home', function(req,res){
+var storage = multer.diskStorage({ //이 객체의 프로퍼티는 2개갖고 있다.
-  console.log("home");
+    destination: function (req, file, cb) {
-  res.render('upload');
+        cb(null, 'uploads/');//업로드 위치를 저장하는 path함수
+    },
+    filename: function (req, file, cb) {
+        // cb(null, file.originalname); //저장할 파일명
+        cb(null, 'mypic.jpg');
+    }
 });
+var upload = multer({ storage: storage});
-/*app.post('/uploads',upload.single('userfile'),function(req,res){
-
-  upload(req,res,function(err) {
-      if(err) {
-          return res.end("Error uploading file.");
-      }
-      res.end("File is uploaded");
-  });
-  console.log(req.file);
-  res.render('facedetection');
-})*/
-app.post('/uploads', upload.single('userfile'),function(req,res){
+// Replace <Subscription Key> with your valid subscription key.
+var subscriptionKey = '61650f4a2941462ea2dba74eabefd114';
+// You must use the same location in your REST call as you used to get your
+// subscription keys. For example, if you got your subscription keys from
+// westus, replace "westcentralus" in the URL below with "westus".
+var uriBase = 'https://eastasia.api.cognitive.microsoft.com/face/v1.0/detect';
+var imageUrl = 'http://localhost:8080/user/mypic.jpg';
+// Request parameters.
+var params = {
+    'returnFaceId': 'true',
+    'returnFaceLandmarks': 'false',
+    'returnFaceAttributes': 'age,gender,emotion,hair'
+    //'headPose,smile,facialHair,glasses, emotion,hair,makeup,occlusion,accessories,blur,exposure,noise'
+};
+var options = {
+    uri: uriBase,
+    qs: params,
+    body: '{"url": ' + '"' + imageUrl + '"}',
+    headers: {
+        'Content-Type': 'application/json',
+        'Ocp-Apim-Subscription-Key' : subscriptionKey
+    }
+};
-  console.log("uploads");
+app.get('/home', function(req,res){
-  console.log(req.file);
+    console.log("home");
-
+    res.render('upload');
-  res.render('facedetection');
-
 });
-
+app.post('/uploads', upload.single('userfile'),function(req,res){
-app.listen(8080, function(){
+    res.render("result")
-  console.log("connnected, 8080 port!");
+    console.log(req.file.path)
+    request.post(options, (error, response, body) => {
+        if (error) {
+            console.log('Error: ', error);
+            return;
+        }
+        let jsonResponse = JSON.stringify(JSON.parse(body), null, '  ');
+        console.log('JSON Response\n');
+        console.log(jsonResponse);
+    });
 });
+
+var server = http.createServer(app).listen(app.get('port'), function () {
+    console.log('Express server listening on port ' + vhost + ":" + server.address().port);
+});
\ No newline at end of file
--- a/uploads/mypic.jpg 0 → 100644
View file @d5db436
+++ b/uploads/mypic.jpg 0 → 100644
View file @d5db436
--- a/views/upload.html
View file @d5db436
+++ b/views/upload.html
View file @d5db436
@@ -18,7 +18,7 @@
 <title>Age Detection</title>
-<link rel = "stylesheet" href="http://localhost:8080/assets/css/upload.css">
+<link rel ="stylesheet" href="http://localhost:8080/assets/css/upload.css">
 <link rel="stylesheet" href="http://localhost:8080/assets/css/bootstrap.min.css">
 <link rel="stylesheet" href="http://localhost:8080/assets/css/animate.css">
 <link rel="stylesheet" href="http://localhost:8080/assets/css/magnific-popup.css">
@@ -30,14 +30,10 @@
 <script src="https://apis.google.com/js/platform.js" async defer>
   {lang: 'ko'}
 </script>
-
-
 </head>
 <body>
-
-
 <!-- PRE LOADER -->
 <div class="preloader">
      <div class="spinner">
@@ -45,7 +41,6 @@
      </div>
 </div>
-
 <!-- HOME SECTION -->
 <section id="home" class="parallax-section">
      <div class="container">
@@ -64,71 +59,56 @@
      </div>
 </section>
-
 <!-- SERVICE SECTION -->
 <section id="service" class="parallax-section">
-     <div class="container">
+    <div class="container">
-          <div class="row">
+        <div class="row">
-
+            <div class="wow fadeInUp section-title" data-wow-delay="0.2s">
-               <div class="wow fadeInUp section-title" data-wow-delay="0.2s">
+                <!-- SECTION TITLE -->
-                    <!-- SECTION TITLE -->
+                <h2>자, 이제 나이를 측정하고 싶은 사람의 사진을 <br/>업로드 해주세요!</h2>
-                    <h2>자, 이제 나이를 측정하고 싶은 사람의 사진을 <br/>업로드 해주세요!</h2>
+            </div>
-               </div>
+
-
+            <div>
-
+                <ul class="actions">
-<div>
+                    <form action="/uploads" method="post" enctype="multipart/form-data">
-               <ul class="actions">
+                        <input type="file" name="userfile" class="upload" value="업로드">
-             <form action="/uploads" method="post" enctype="multipart/form-data">
+                        <input type="submit" value="완료" class= "button">
-             <input type="submit" value="완료" class= "button">
+                    </form>
-           </form>
+                </ul>
-<br>
+            </div>
-           </ul>
+            </div>
-</div>
+        </div>
- <div id="wrapper">
+    </div>
-  <div class = "filebox">
-    <br>
-    <br>
-    <br>
-          <ul class="actions">
-        <form action="/uploads" method="post" enctype="multipart/form-data">
-        <label for="userfile">업로드</label>
-          <input type="file" id="userfile" class="upload" value="업로드"></input>
-          </form>
-         </ul>
-  </div>
- </div>
-
-
 </section>
-
-
-
 <!-- FOOTER SECTION -->
 <footer>
     <div class="container">
         <div class="row">
-
+            <div class="wow fadeInUp col-md-12 col-sm-12" data-wow-delay="0.8s">
-               <div class="wow fadeInUp col-md-12 col-sm-12" data-wow-delay="0.8s">
+                <p class="white-color"> Opensource software programming 2018 RETURN</p>
-                    <p class="white-color"> Opensource software programming 2018 RETURN</p>
                     <div class="wow fadeInUp" data-wow-delay="1s">
-                         <ul class="social-icon">
+                        <ul class="social-icon">
-                              <li><a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='
+                            <li><a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='
                                  +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog',
                                  'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank"
-                                          alt="Share on Facebook" class = "fa fa-facebook"></a></li>
+                                          alt="Share on Facebook" class = "fa fa-facebook"></a>
-                                &nbsp;&nbsp; <!--스페이스바 두 개 ^^7-->
+                            </li>
-                              <li><a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20'
+                             <!--스페이스바 두 개 ^^7-->
+                            <li><a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20'
                               +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog',
-                               'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" class="fa fa-twitter"></a></li>
+                               'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" class="fa fa-twitter"></a>
-                               &nbsp;&nbsp;  <!--스페이스바 두 개 ^^7-->
+                            </li>
-                              <li><a href="#" onclick="javascript:window.open('https://plus.google.com/share?url='
+                            <!--스페이스바 두 개 ^^7-->
+                            <li><a href="#" onclick="javascript:window.open('https://plus.google.com/share?url='
                               +encodeURIComponent(document.URL), 'googleplussharedialog','menubar=no,toolbar=no,resizable=yes, scrollbars=yes,height=300,width=600');return false;"
-                                 target="_blank" alt="Share on Google+" class="fa fa-google-plus"></a></li>
+                                 target="_blank" alt="Share on Google+" class="fa fa-google-plus"></a>
+                            </li>
                          </ul>
                     </div>
-          </div>
+              </div>
-     </div>
+         </div>
+    </div>
 </footer>
 <!-- SCRIPTS -->
@@ -141,14 +121,12 @@
 <script src="http://localhost:8080/assets/js/wow.min.js"></script>
 <script src="http://localhost:8080/assets/js/custom.js"></script>
-<script>
+<script>/*
 document.getElementById('userfile').onchange = function(){
   alert(this.value+' Upload Ok!');
-}
+}*/
 </script>
 </body>
-</script>
-
 </html>