2013-06-03 84 views
1

我在任何地方找到的答案都沒有奏效。我試圖擴展「開發Backbone.js應用程序」中的例子來上傳文件。儘管表單具有enctype =「multipart/form-data」,但request.files始終未定義。backbonejs節點文件上傳

形式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文件上傳,這讓我無處可去。

如果我有頭髮,我現在就把它拉出來。

+0

http://estebanpastorino.com/2013/09/27/simple-file-uploads-with-backbone-dot-js/ – Joe

回答

0

我也在跟隨「開發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 
     }); 
    } 
); 
}); 

我希望它有幫助。

1

我不會將該文件作爲model.save/collection.create(model)的一部分提交。

我用的是Plupload用於文件上傳管理器,將文件提交給上傳處理程序。此上傳處理程序要麼返回上傳文件的路徑,要麼將參考文件存儲在數據庫表中。

從那裏我填充我的骨幹模型中的一個屬性,然後堅持模型。您可以讓您的模型listenTo plupload,上傳完成的事件或類似的。

+0

我對骨幹很陌生,我根本弄不清楚如何得到開始。你有任何簡單的例子嗎?我只需要基本的例子,只需要一個文件上傳。以後我可以找出聽衆,但我無法使上傳按鈕在骨幹網頁上工作,而且我不知道如何在用戶點擊上傳時上傳文件。 – user2449001

+0

沒有我可以提供的「基本」示例,因爲我不認爲您的文件上傳應該通過典型的骨幹網同步進行。我的建議是,您需要開發一些功能來上傳文件,然後在您的書籍模型上設置對該文件的引用,然後同步該文件。你似乎沒有任何困難讓你的模型到你的後端,所以你的問題是上傳。至於如何組合文件和模型,我已經解釋過我以前做過的事情。 – damienc88

+0

這就是爲什麼我開始這個線程,想出如何獲取文件上傳。我一直無法通過骨幹做出任何進展。我希望得到那方面的幫助,對不起,我不清楚。 – user2449001

-2

原來,我不得不最終聘請某人來做這件事,因爲我無法在網上找到任何人通過主幹上傳文件的例子,即使沒有更新任何數據庫交互。每個人都有與使用什麼工具上傳文件相同的基本建議,但我不能在我的生活中找到某個人實施它的例子。

我打算讓代碼對所有人都可用,以便他們可以看到它是如何工作的。

+0

你可以在這裏看到一個工作示例https://github.com/jeffakaufman/rejuvasea.git – user2449001

+0

這個例子不是通過主幹上傳文件的例子,這是你的問題要求。這是通過JavaScript上傳文件的一個例子。 – damienc88