2

Django REST Framework で作った API に backbone.js と JQuery で画像ファイルをアップロードしようとしています。このチュートリアル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 メディア 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'

また、特にフィールドは写真と呼ばれ、モデルではイメージフィールドです。

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 に答える