jquery - Django REST框架和Backbone.js文件上传问题

Question

我正在尝试将带有backbone.js 和JQuery 的图像文件上传到由Django REST Framework 制作的API。我首先按照本教程 http://10kblogger.wordpress.com/2012/05/25/a-restful-password-locker-with-django-and-backbone-js/ 进行操作.

当我提交表单并上传文件时，我收到一个错误的请求，指出照片字段是必需的，即使我已经选择了一个文件。

我得到的错误是:

{"photo":["Thisfieldisrequired."]}

还有:

The requested URL /static/media/C:/fakepath/music notes.png was not found on this server.

我的 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媒体网址和静态网址证明一切设置正确

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。

Answer 1

不确定您是否找到了解决方案，因为已经过去了几个月，但我想我会做出回应，以防其他人遇到这个问题。

将文件上传到 REST API 资源 URI 需要特别小心，因为它比简单地使用某些标准(非文件)表单字段执行 HTTP POST 更复杂。然而，HTML5 使其变得比以前容易得多。

如果你看看你的陈述......

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

这没有获取实际文件。它获取浏览器的字段字段实现放在那里的临时字符串。在你的例子中，它是C:/fakepath/musicnotes.png。

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

如果您想手动推出自己的上传功能，请阅读http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-formdata