主干js节点文件上传

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-file-upload，但无济于事。

如果我有头发，我会马上拔掉它。

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

结果我最终不得不雇人来做这件事，因为我在网上找不到任何人通过骨干上传文件的例子，即使没有更新任何数据库交互。对于使用什么工具来上传文件，每个人都有相同的基本建议，但我终其一生都找不到一个实施它的例子。

我计划将代码提供给所有人，以便他们了解它是如何工作的。