2016-08-29 2 views
1

나는 fileUpload (NodeJS로 만든)를 가지고 있는데 {{upload.message}}의 html로 업로드 성공을 보여주고 싶습니다. AngularJS로 구현했지만 작동하지 않았습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?nodejs 백엔드에서 프론트 엔드로 콜백 보내기

HTML

<form enctype="multipart/form-data" action="/upload" 
    method="POST"> 
    <div class="form-group"> 
    <input type="file" name="file" /> 
     <p></p> 
    <input type="file" name="file" /> 
     <p></p> 
    <input type="file" name="file" /> 
     <br> <br> 
     <input type="submit" value="Upload File" name="submit" 
      class="btn btn-primary"> 
</form> 
<span>{{upload.message}}</span> 
</div> 

NodeJS

router.post('/upload', function(req,res){ 
    upload(req,res,function(err) { 
     var fileNames = []; 
     req.files.forEach(function(element){ 
      fileNames.push(element.filename); 
     }) 
     console.log('Selected Files: ', fileNames); 
     if(err){ 
      res.end("Error: '" , err , "'"); 
     }else{ 
     res.sendStatus(204); 
     } 
    }); 
}); 

AngularJS와

var self = this; 
    this.message = ""; 

    this.upload= function(){ 
    $http.post('/uploads') 
     .then(function success(result){ 
      self.message = "Upload worked"; 
     }, 
     function error(response){ 
      self.message = "Error upload failed"; 
     }); 
    }; 
+0

먼저 경로를 확인하십시오.양식에/업로드하고 Angularjs로 노드 및/업로드합니다. 둘째, 정규 HTML/액션이 아닌 각도를 통해 양식을 제출해야합니다. $ scope에 메시지를 바인드하고 서버에서 200 OK를받은 후 메시지를 업데이트합니다. 양식을 제출하려면 여기 [link] (https://docs.angularjs.org/guide/forms)를 확인하십시오. – Bob

답변

1

편집 :이 책을 읽어야합니다. http://www.allitebooks.com/read/index.php?id=7630

일반적으로 브라우저에서 서버로 요청을 보내고 다른 방법으로는 요청하지 않습니다. Ajax를 폴링과 함께 사용하는 것이 좋습니다. 서버에서 브라우저로 요청을 보내는 경우 Comet을 사용할 수 있습니다 (하지만 그 해결책은 권장하지 않습니다).

(귀하의 질문에 언급되지 않은 입력해도) jQuery를, 당신은 모든 x 초 폴링 다음처럼 작성할와

:

function doPoll() { 
 
    $.ajax({ 
 
     url: "/uploads", 
 
     type: "POST", 
 
     data: { 
 
      //Set an empty response to see the error 
 
      xml: "<response></response>" 
 
     }, 
 
     dataType: "text xml", 
 
     success: function(xml, textStatus, xhr) { 
 
      if (xhr.status == "200") { 
 
       //do the thing you wanted to do on succes 
 
      } 
 
     }, 
 
     complete: function(xhr, textStatus) { 
 
      console.log(xhr.status); 
 
     } 
 
    }); 
 
    setTimeout(doPoll,5000); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

P.S.을 sockets 나는 또한 해결책을 좋아하지만 조심성있는 소켓은 HTTP와 같은 REST가 아니다.

당신은 이런 식으로 생각해야 : 브라우저는 그러나 COMMET하거나 가능 WebSocket을 함께 무 요청을 만들기 위해 열 수 없습니다 연결을 유지하기위한 것입니다. 내가 추천하는 폴링을 사용하면 서버에 정보를 요청할 때까지 많은 시간을 요청합니다. 응답은 입니다. 위의 스트리밍

없음 부정적인 부작용없이 모든 최신 브라우저 에서 작업을 전송하지 : 혜성에 대한 위키에서

. 이로 인해 Comet 개발자는 에 여러 개의 복잡한 스트리밍 전송을 구현하고 브라우저에 따라 을 전환합니다. 결과적으로 많은 Comet 응용 프로그램은 브라우저에서 구현하기가 더 쉬운 긴 폴링을 사용하고 XHR을 지원하는 모든 브라우저에서 최소한 이 작동합니다. 이름에서 알 수 있듯이 긴 폴링에서는 클라이언트가 서버를 폴링하여 이벤트 (또는 이벤트 집합)가 필요합니다. 브라우저는 서버에 으로 Ajax 스타일 요청을하고 서버에 을 전송할 새 데이터가있을 때까지 열린 상태로 유지되며 브라우저는 완전한 응답으로 브라우저에 전송됩니다. 브라우저는 후속 이벤트 인 을 얻기 위해 새로운 긴 폴링 요청을 시작합니다. 긴 폴링을 수행하는 특정 기술은 다음과 같습니다.

+0

업로드가 작동하면 출력을하고 싶습니다. 그래서 내가 이해한다면 Frontend에서 이것을해야하지만, $ HTTP.post ('upload', function (...)로 시작하기 때문에 angularJS로하고 싶습니다. 계속하려면 {{message}} nolags

+0

에 anglejs로 시도했지만 작동하지 않습니다. 위에 편집했습니다 . – nolags

+0

@nolags 그러면이 Q & A를 볼 수 있습니다. http://stackoverflow.com/ 질문/13671031/server-polling-with-angularjs –

관련 문제