2013-03-07 2 views
2

backbone.js 및 JQuery가 포함 된 이미지 파일을 Django REST Framework에서 만든 API에 업로드하려고합니다. 나는이 튜토리얼 http://10kblogger.wordpress.com/2012/05/25/a-restful-password-locker-with-django-and-backbone-js/을 따라 시작했다.Django REST 프레임 워크 및 Backbone.js 파일 업로드 문제

양식을 제출하고 파일을 업로드 할 때 파일을 선택 했는데도 사진 필드가 필요하다는 잘못된 요청이 표시됩니다.

내가 오류는 다음과 같습니다

{ "사진": [ ". Thisfieldisrequired"]} 또한

과 :

요청한 URL/static/media/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

관련 문제