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

我不会将该文件作为model.save / collection.create(model)的一部分提交。

我使用Plupload作为文件上传管理器，将文件提交给上传处理程序。此上传处理程序返回上传文件的路径，如果引用存储在数据库表中，则返回fileId。

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

Answer 2

我也在关注“开发Backbone.js应用程序”一书的示例，我扩展了将图像上传到服务器中的文件夹的功能，并将路径保存在我的模型中以显示正确的图像。它工作正常。我试图使用Plupload和其他jquery插件，但我不喜欢它们。我的示例使用ajax将图像上传到服务器然后使用它们。我阅读了许多引用iframe使用ajax功能的帖子。我找到的最佳方法是使用jquery.form.js来避免回发并以一种很好的方式加载图像。

使用nodeJS正常运行的示例：

https://github.com/albertomontellano/bookLibrarySampleNodeJS

我在Mark Dawson的帖子中提出了我的解决方案：

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 3

原来我不得不雇人去做，因为我在网上找不到任何通过骨干上传文件的例子，即使没有更新任何数据库交互。每个人都有关于使用什么工具上传文件的相同基本建议，但我不能在我的生活中找到一个实现它的人的例子。

我打算让代码可供所有人使用，这样他们就可以看到它是如何工作的。

backbonejs节点文件上传

3 个答案: