Django + jQuery: Ошибка No Image Provided с ответом 400 31 при загрузке изображения через AJAX

Я работаю над проектом на Django, в котором загружаю изображение для обработки моделью машинного обучения. Фронтенд использует jQuery для отправки изображения через AJAX-запрос. Однако сервер продолжает возвращать ошибку: {"error": "No image provided."} и Accuracy: NaN%. Кроме того, в консоли браузера я получаю ответ 400 31.

Фронтенд (AJAX и HTML-код):

<script>
    $(document).ready(() => {
        $("input[id='image']").on('change', function (event) {
            let input = this;
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#banner').css('width', '350px')
                $('#banner').addClass('img-thumbnail')
                $('#banner').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        })

        $('#process').click(() => {
            $('.buttons').hide()
            $('.loader').show()
            $('#title').html("Processing...")
            let image = $('#image').prop('files')[0]
            var data = image['name'];

            console.log(data)
            $.ajax({
                url: "http://127.0.0.1:8000/api/",
                type: "POST",
                dataType: 'json',
                data: {
                    image: data,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                headers: {
                    'Authorization': 'z*qm$(e9k0wa--t!^ux(xn15vk$)h7c$%3%vflo^@_++bg&uw(', // CSRF token
                    'Content-Type': 'application/json' // JSON
                },
                success: function (xhr) {
                    alert("Error while processing")
                },
                error: function (xhr) {
                    $('#title').html("Result")
                    let result = (xhr.responseText).split("-");
                    let disease = result[0];
                    let accuracy = result[1];
                    $('.loader').hide()
                    $('#disease').html("Result: " + disease)
                    $('#accuracy').html("Accuracy: " + parseInt(accuracy).toFixed(2) + "%")
                    $('#graph').attr('src', '{% static "graph.png" %}')
                    $('.result').show()
                }
            });
        });
    });
</script>

Django Views.py:

from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
from django.http import HttpResponse, JsonResponse
from diab_retina_app import process


@csrf_exempt
def display(request):
    if request.method == 'GET':
        return render(request, 'index.html')


@csrf_exempt
def process_image(request):
    if request.method == 'POST':
        img = request.FILES.get('image')

        if img is None:
            return JsonResponse({'error': 'No image provided.'}, status=400)
        
        print("Image uploaded:", img)  # Log the image details

        try:
            response = process.process_img(img)
            return HttpResponse(response, status=200)
        except ValueError as e:
            return JsonResponse({'error': str(e)}, status=500)

Я также проверил следующее:

• Ввод файла работает на стороне клиента, и изображение правильно отображается перед отправкой.

• Данные формы строятся, и к ним добавляется image.

  Но сервер по-прежнему отвечает {"error": "No image provided."}.

Что может быть причиной ошибки 400 31 и проблемы «Изображение не предоставлено»? Как правильно отправить файл изображения на бэкэнд Django?

Вернуться на верх