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将图像上传到服务器，然后使用它们。我读了很多关于使用iframe来实现Ajax功能的文章。我发现的最佳方法是使用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用于文件上传管理器，将文件提交给上传处理程序。此上传处理程序要么返回上传文件的路径，要么将参考文件存储在数据库表中。

从那里我填充我的骨干模型中的一个属性，然后坚持模型。您可以让您的模型listenTo plupload，上传完成的事件或类似的。

Answer 3

原来，我不得不最终聘请某人来做这件事，因为我无法在网上找到任何人通过主干上传文件的例子，即使没有更新任何数据库交互。每个人都有与使用什么工具上传文件相同的基本建议，但我不能在我的生活中找到某个人实施它的例子。

我打算让代码对所有人都可用，以便他们可以看到它是如何工作的。