backbonejs 노드 파일 업로드

Question

아무데도 내가 찾은 답변이 없습니다. "Backbone.js 응용 프로그램 개발"에서 예제를 확장하여 파일을 업로드하려고합니다. 양식에 enctype = "multipart/form-data"가 있지만 request.files은 항상 정의되지 않습니다.

양식 HTML은 다음과 같습니다

<form id="addBook" action="..." enctype="multipart/form-data"> 
    <div> 
     <label for="coverImage">CoverImage: </label><input id="coverImage" name="coverImage" type="file" /> 
     <label for="title">Title: </label><input id="title" type="text" /> 
     <label for="author">Author: </label><input id="author" type="text" /> 
     <label for="releaseDate">Release date: </label><input id="releaseDate" type="text" /> 
     <label for="keywords">Keywords: </label><input id="keywords" type="text" /> 
     <button id="add">Add</button> 
    </div> 
</form> 

새 레코드를 저장 노드가 호출되는

addBook: function(e) { 
    e.preventDefault(); 

    var formData = {}; 
    var reader = new FileReader(); 
    $('#addBook div').children('input').each(function(i, el) { 
     if($(el).val() != '') 
     { 
      if(el.id === 'keywords') { 
       formData[ el.id ] = []; 
       _.each($(el).val().split(' '), function(keyword) { 
        formData[ el.id ].push({ 'keyword': keyword }); 
       }); 
      } else if(el.id === 'releaseDate') { 
       formData[ el.id ] = $('#releaseDate').datepicker('getDate').getTime(); 
      } else { 
       formData[ el.id ] = $(el).val(); 
      } 
     } 
    }); 
     console.log(formData); 
     this.collection.create(formData); 
    } 

입니다 백본.

//Insert a new book 
app.post('/api/books', function(request, response) { 
    console.log(request.body); 
    console.log(request.files); 
}); 

coverimage 노드로 보내는 값은 정확합니다. request.files에는 아무 것도 입력되지 않습니다. 나는 대신 멋진 드래그 앤 드롭을 사용하고 싶습니다.하지만이 작업을 할 때까지 나는 갇혀 있습니다.

나는 JQuery 파일 업로드를 시도했지만 아무데도 가져 오지 못했습니다.

내가 머리카락을 가지고 있다면 지금 당길 것입니다.

Answer 1

또한 "Backbone.js 응용 프로그램 개발"책의 샘플을 다음과 같이 서버의 폴더에 이미지를 업로드하고 올바른 이미지를 표시하도록 모델에 경로를 저장하는 기능을 확장했습니다. 잘 작동합니다. 나는 Plupload와 다른 jquery 플러그인을 사용하려고했지만 나는 그들을 좋아하지 않았다. 내 샘플은 ajax를 사용하여 서버에 이미지를 업로드 한 다음 이미지를 사용하고 있습니다. Ajax 기능을 사용하기 위해 iframe을 참조하는 많은 게시물을 읽었습니다. 내가 찾은 최선의 방법은 jquery.form.js를 사용하여 포스트 백을 피하고 이미지를 좋은 방법으로로드하는 것입니다.nodeJS와

실행중인 샘플 작업을 잘 :

https://github.com/albertomontellano/bookLibrarySampleNodeJS

내가 마크 도슨의 게시물에 내 솔루션을 기반으로 : 그러나

http://markdawson.tumblr.com/post/18359176420/asynchronous-file-uploading-using-express-and-node-js

을 나는 방법을 수정했다 이 게시물을 올바르게 작동하게하려면 :

app.post('/api/photos', function(req, res) { 
var responseServerPath = 'images/' + req.files.userPhoto.name; 
var serverPath = 'site/images/' + req.files.userPhoto.name; 
console.log(req.files.userPhoto.path); 
require('fs').rename(
    req.files.userPhoto.path, 
    serverPath, 
    function(error) { 
     if(error) { 
      console.log(error); 
      res.send({ 
       error: 'Ah crap! Something bad happened' 
      }); 
      return; 
     } 

     res.send({ 
      path: responseServerPath 
     }); 
    } 
); 
}); 

도움이되기를 바랍니다.

Answer 2

model.save/collection.create(model)의 일부로 파일을 제출하지 않았을 것입니다.

내가 사용한 것은 파일 업로드 관리자에 대해 Plupload이며 업로드 핸들러에 파일을 제출하는 것입니다. 이 업로드 처리기는 업로드 된 파일의 경로를 반환하거나 참조가 데이터베이스 테이블에 저장되어있는 경우 fileId를 반환합니다.

거기에서 내 백본 모델의 속성을 채운 다음 모델을 유지합니다. 업로드 완료 이벤트 또는 유사한 경우 모델 listenTo을 업로드 할 수 있습니다.

Answer 3

밝혀졌습니다. 데이터베이스 상호 작용을 업데이트하지 않고도 누군가 백본을 통해 파일을 업로드하는 온라인 예제를 찾을 수 없기 때문에 누군가를 고용해야했습니다. 누구나 파일을 업로드하는 데 사용할 도구에 대한 기본 지식은 동일하지만, 필자의 삶은 그것을 구현하는 사람의 한 가지 예를 찾을 수 없습니다.

나는 모두에게 코드를 공개 할 계획을 세우고 있으므로 어떻게 작동하는지 볼 수 있습니다.