2013-03-07 51 views
2

我试图上传一个图像文件backbone.js和JQuery到由Django REST框架制作的API。我已经开始遵循本教程http://10kblogger.wordpress.com/2012/05/25/a-restful-password-locker-with-django-and-backbone-js/Django的REST框架和Backbone.js文件上传问题

当我去提交表单并上传文件时,我收到了一个错误的请求,说明照片是必需的,尽管我选择了一个文件。

我得到的错误是:

{ “照片”: “Thisfieldisrequired”]}

也:

的请求的URL /静态/媒体/ C:/ fakepath/music notes.png在此服务器上找不到。

我的HTML:

<div id="listingModal" class="modal hide fade"> 
    <form id="listingForm" enctype="multipart/form-data" method="post"> 
     <div class="modal-header"><button class="close" data-dismiss="modal">×</button> 
      <h3>Listing Details</h3> 
     </div> 
     <div class="modal-body">{{ form }}</div> 
     <div class="modal-footer"> 
      <a class="btn" href="#" data-dismiss="modal">Cancel</a> 
      <input class="btn btn-primary" type="submit" value="Save" /> 
     </div> 
    </form> 
</div> 

的节电功能:

handleModal: function(event) 
    { 
     event.preventDefault(); 
     event.stopImmediatePropagation(); 
     var form = $('#listingForm'); 

     var listingData = 
     { 
      title: $(form).find('#id_title').val(), 
      description: $(form).find('#id_description').val(), 
      //user: $(form).find('#id_user').val(), 
      photo: $(form).find('#id_photo').val(), 
      trade_completed: $(form).find('#id_trade_completed').val(), 
      date_created: $(form).find('#id_date_created').val(), 
      date_completed: $(form).find('#id_date_completed').val(), 
     }; 

     if($('#listingModal').data('client_id')) 
     { 
      listingData.listing_id = $('#listingModal').data('client_id'); 
      this.listings.updateListing(listingData); 
     } 
     else 
     { 
      this.listings.addNew(listingData); 
     } 
      //hide the modal 
     $('#listingModal').modal('hide'); 

     return this; 

    }, 

的updateListing功能:

updateListing: function(listingData) 
    { 
     var listing = this.listings.get({id: listingData.listing_id}); 
     if(_.isObject(listing)) 
     { 
      //iterate through the data, and add it to the model 
      for(var key in listingData) 
      { 
       //dont copy id, already checked 
       if(key != 'listing_id') 
       { 
        listing.set(key,listingData[key]); 
       } 
      } 
      listing.save(); 
      //this.listings.sort(); 
     } 
    }, 

我读过一些事情说这可能是因为我必须努力盟友上传文件,但不知道如何做到这一点。任何帮助将不胜感激。

编辑:这里是我的settings.py媒体URL和静态URL证明这一切都树立正确的

MEDIA_ROOT = '/opt/bitnami/apps/django/django_projects/Project/Project/static/media/' 
MEDIA_URL = '/static/media/' 
STATIC_ROOT = '/opt/bitnami/apps/django/django_projects/Project/Project/static' 
STATIC_URL = '/static/static_files_dir' 

而且,特别是场被称为照片,是和模型的ImageField英寸

回答

2

不知道您是否因为过去几个月才找到解决方案,但我想我会回应以防其他人在这个问题上绊倒。

将文件上传到REST API资源URI需要特别小心,因为它比仅使用一些标准(非文件)表单字段执行HTTP POST更复杂。但是,HTML5比以前更容易。

如果你看一下你的说法...

photo: $(form).find('#id_photo').val(), 

那请问获得实际的文件。它抓取一个浏览器的字段字段实现放在那里的临时字符串。在你的情况下,它是C:/ fakepath/music notes.png

您需要获取对控件上实际文件键的引用。对于使用jQuery使用一些示例代码,阅读How can I upload files asynchronously?

如果你想手卷自己上传的功能,然后读取http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-formdata