2

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

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

我得到的错误是：

{“照片”：[“此字段为必填项。”]}

并且：

在此服务器上未找到请求的 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 媒体网址和静态网址证明一切设置正确

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'

此外，模型中的字段特别称为 photo 和 is 和 Imagefield。

4

1 回答 1

2

不知道你是否找到了解决方案，因为已经有几个月了，但我想我会做出回应，以防其他人偶然发现这个问题。

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

如果你看你的陈述...

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

那没有得到实际的文件。它抓取浏览器的字段字段实现放置在那里的临时字符串。在您的情况下，它是C:/fakepath/music notes.png。

您需要获得对控件上实际文件键的引用。有关与 jQuery 一起使用的一些示例代码，请阅读如何异步上传文件？

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

于 2013-07-01T17:31:27.917 回答