Как загрузить фотографии по Ajax в Django?

Question

В настоящее время я пытаюсь создать функцию, позволяющую пользователям изменять свои профили, включая электронную почту, имена и фотографии.Однако мне удалось изменить адрес электронной почты и имена, но мне не удалось изменить фотографии.Моя первоначальная идея состоит в том, чтобы сначала я получил путь к фотографии, а затем передал путь к view.py.

Мой HTML-код выглядит так:

<input type="file" id="ava_up" name="ava_up" accept="image/png, image/jpeg, image/gif, image/jpg" />

Мой AJAX-код:

$(document).on('submit', '#profile_edit', function (e) {
            e.preventDefault();

            var usr_nickname = $('#e_nickname').val();
            var pattern = "%";
            var res = usr_nickname.match(pattern)

            if(res){
                $('#error_info').html("<b>Your nickname should not contain %.</b>")
                return;
            }

            var usr_email = $('#e_email').val();
            var usr_photo = $('#ava_up').val();

            $.ajax({
                type:'POST',
                url:'./',
                data:{
                    async: false,
                    avatar:usr_photo,
                    nickname:usr_nickname,
                    email:usr_email,
                    csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                },
                success:function (response) {
                    var t = $.parseJSON(response)
                    if (t.code == 1){
                        $('#error_info').html("<b></b>")
                        $('#done').modal('show')
                    }
                    else if (t.code == -2){
                        $('#error_info').html(t.message)
                    }
                    else {
                        $('#error_info_2').html(t.message)
                    }
                    //window.location.reload()
                },
            })
        })

my View.py:

def edit_usr_profile(request):

result = collections.OrderedDict()
result['code'] = ""
result['message'] = ""

user = request.user
objs = UserProfile.objects.filter(usr=user)
usr_objs = UserProfile.objects.get(usr=user)
if request.method == 'POST':
    if request.is_ajax():
        try:
            usr_objs.avatar = request.FILES.get('avatar')
            usr_objs.nickname = request.POST.get('nickname')
            usr_objs.email = request.POST.get('email')
            usr_objs.save()
            result['code'] = "1"
            result['message'] = ""
        except Exception as e:
            if str(e) == "'avatar'":
                result['code'] = "-1"
                result['message'] = "Failed to upload photo."
            else:
                result['code'] = "-2"
                result['message'] = "The nickname you entered exists. Please try another one."
        return JsonResponse(json.dumps(result), safe=False)

return render(request, 'account/edit_profile.html', {'objs':objs, 'resultInfo':result})

Я просто попытался предупредить путь к фотографии, но он вернул "C:\fakepath\photo.jpg".Затем я искал в Google, и люди сказали, что это из-за безопасности браузера.Поэтому мне интересно, есть ли у кого-нибудь предложения о том, как я могу загрузить (или передать полный путь изображений в View.py) фотографии?

Буду очень признателен, если вы мне поможете!

Answer 1

Вы не отправляете фактическое изображение с .val(), просто имя файла. Чтобы отправить изображение через ajax, вам нужно будет использовать FormData для отправки формы:

edit_profile.html:

<form id="profile_edit">
    {% csrf_token %}
    <input type="text" id="e_nickname" name="email"/>
    <input type="text" id="e_email" name="nickname"/>
    <input type="file" id="ava_up" name="avatar" accept="image/png, image/jpeg, image/gif, image/jpg"/>
    <button type="submit">submit</button>
</form>
<script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
<script>
    $(document).on('submit', '#profile_edit', function (e) {
        e.preventDefault();

        var usr_nickname = $('#e_nickname').val();
        var pattern = "%";
        var res = usr_nickname.match(pattern)

        if (res) {
            $('#error_info').html("<b>Your nickname should not contain %.</b>")
            return;
        }

        $.ajax({
            type: 'POST',
            url: './',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (response) {
                var t = $.parseJSON(response)
                if (t.code == 1) {
                    $('#error_info').html("<b></b>")
                    $('#done').modal('show')
                } else if (t.code == -2) {
                    $('#error_info').html(t.message)
                } else {
                    $('#error_info_2').html(t.message)
                }
                //window.location.reload()
            },
        })
    })
</script>

Answer 2

Допустим, у вас есть форма, подобная <form id="myForm"> ur js должна выглядеть следующим образом

$(document).on('submit', '#myForm', function (e) {
        e.preventDefault();
        // validations
        let formData = new FormData($("#myForm")[0]);
        $.ajax({
           url: url,
           type: 'post',
           contentType: false,
           processData: false,
           data: formData
        })  
        .done(function(){
           // success 
        })
        .fail(function(){
           // fail
       }) 
});

В представлении «Загрузка дескриптора», как в обычном потоке.

form = MyModelForm(request.POST, request.FILES)
form.save()