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 72 additions and 71 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
\ No newline at end of file
-uploads/mypic.jpg
\ No newline at end of file
--- a/app.js
View file @d5db436
+++ b/app.js
View file @d5db436
@@ -2,9 +2,24 @@ 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 port = process.env.PORT || 8080;
+var ip = process.env.IP || "localhost";
-var _storage = multer.diskStorage({ //이 객체의 프로퍼티는 2개갖고 있다.
+
+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'));
+app.set('views','./views');
+app.set('view engine', 'html');
+app.use(bodyParser.urlencoded({extended:false}));
+
+var storage = multer.diskStorage({ //이 객체의 프로퍼티는 2개갖고 있다.
     destination: function (req, file, cb) {
         cb(null, 'uploads/');//업로드 위치를 저장하는 path함수
     },
@@ -12,44 +27,53 @@ var _storage = multer.diskStorage({ //이 객체의 프로퍼티는 2개갖고 
         // cb(null, file.originalname); //저장할 파일명
         cb(null, 'mypic.jpg');
     }
- })
+});
- var upload = multer({ storage: _storage})
+var upload = multer({ storage: storage});
-app.locals.pretty = true;
+
-app.engine('html', require('ejs').renderFile);
+
-app.use(express.static('public'));
+// Replace <Subscription Key> with your valid subscription key.
-app.use('/user',express.static('uploads'));
+var subscriptionKey = '61650f4a2941462ea2dba74eabefd114';
-app.set('views','./views');
+// You must use the same location in your REST call as you used to get your
-app.set('view engine', 'html');
+// subscription keys. For example, if you got your subscription keys from
-app.use(bodyParser.urlencoded({extended:false}));
+// 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
+    }
+};
 app.get('/home', function(req,res){
     console.log("home");
     res.render('upload');
 });
-
+app.post('/uploads', upload.single('userfile'),function(req,res){
-/*app.post('/uploads',upload.single('userfile'),function(req,res){
+    res.render("result")
-
+    console.log(req.file.path)
-  upload(req,res,function(err) {
+    request.post(options, (error, response, body) => {
-      if(err) {
+        if (error) {
-          return res.end("Error uploading file.");
+            console.log('Error: ', error);
+            return;
         }
-      res.end("File is uploaded");
+        let jsonResponse = JSON.stringify(JSON.parse(body), null, '  ');
+        console.log('JSON Response\n');
+        console.log(jsonResponse);
     });
-  console.log(req.file);
-  res.render('facedetection');
-
-})*/
-app.post('/uploads', upload.single('userfile'),function(req,res){
-
-
-  console.log("uploads");
-  console.log(req.file);
-
-  res.render('facedetection');
-
 });
-app.listen(8080, function(){
+var server = http.createServer(app).listen(app.get('port'), function () {
-  console.log("connnected, 8080 port!");
+    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,51 +59,32 @@
      </div>
 </section>
-
 <!-- SERVICE SECTION -->
 <section id="service" class="parallax-section">
     <div class="container">
         <div class="row">
-
             <div class="wow fadeInUp section-title" data-wow-delay="0.2s">
                 <!-- SECTION TITLE -->
                 <h2>자, 이제 나이를 측정하고 싶은 사람의 사진을 <br/>업로드 해주세요!</h2>
             </div>
-
+            <div>
-<div>
                 <ul class="actions">
                     <form action="/uploads" method="post" enctype="multipart/form-data">
+                        <input type="file" name="userfile" class="upload" value="업로드">
                         <input type="submit" value="완료" class= "button">
                     </form>
-<br>
-           </ul>
-</div>
- <div id="wrapper">
-  <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>
-
+        </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">
                 <p class="white-color"> Opensource software programming 2018 RETURN</p>
                     <div class="wow fadeInUp" data-wow-delay="1s">
@@ -116,19 +92,23 @@
                             <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>
+                             <!--스페이스바 두 개 ^^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>
+                            <!--스페이스바 두 개 ^^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>
 </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>