使用 jQuery AJAX 修复 Django 中的“未提供图像”错误和 400 31 响应

在 Django + jQuery 中使用 FormData 解决“未提供图像”错误

这种方法涉及使用 FormData 通过 jQuery 中的 AJAX 正确发送图像文件，以供 Django 后端处理。

// jQuery Script with FormData to send the image correctly
$(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(() => {
        let image = $('#image').prop('files')[0];
        let formData = new FormData();
        formData.append('image', image);
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

        $.ajax({
            url: "/api/",
            type: "POST",
            data: formData,
            processData: false,  // Required for FormData
            contentType: false,  // Required for FormData
            success: function(xhr) {
                alert("Image processed successfully!");
            },
            error: function(xhr) {
                console.log(xhr.responseText);
                alert("Error occurred while processing the image.");
            }
        });
    });
});

Django 中处理图像上传的后端解决方案

此 Django 视图使用 request.FILES 处理图像上传，并安全地处理图像，并进行错误处理。

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

@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)

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

Django 中图像上传的单元测试

该Python脚本使用Django的测试框架来模拟文件上传并验证后端图像处理。

from django.test import TestCase, Client
from django.core.files.uploadedfile import SimpleUploadedFile

class ImageUploadTest(TestCase):
    def setUp(self):
        self.client = Client()

    def test_image_upload(self):
        # Create a fake image for testing
        img = SimpleUploadedFile("test_image.jpg", b"file_content", content_type="image/jpeg")

        response = self.client.post('/api/', {'image': img}, format='multipart')

        self.assertEqual(response.status_code, 200)
        self.assertIn("Result", response.content.decode())

有关 AJAX 和 Django 文件上传的常见问题

1. 为什么我收到“未提供图像”错误？
2. 最常见的原因是图像未正确附加到 FormData AJAX 请求中的对象。确保您使用 FormData.append() 以包含图像文件。
3. 什么是 request.FILES 在姜戈？
4. request.FILES 是 Django 中的字典，保存通过表单上传的所有文件，允许后端处理文件。
5. 如何在 AJAX 请求中附加文件？
6. 你需要创建一个 FormData 对象并使用 append() 方法在通过 AJAX 发送文件之前添加文件。
7. 为什么我需要 processData: false 在阿贾克斯？
8. processData: false 确保 AJAX 请求中发送的数据不会被处理为查询字符串，这对于文件上传至关重要。
9. 如何在 Django 中测试图像上传？
10. 您可以使用 Django 的测试框架以及 SimpleUploadedFile 模拟文件上传并验证后端逻辑。

关于解决图像上传错误的最终想法

在 Django 中通过 AJAX 处理图像上传时，确保前端将图像作为表单数据的一部分正确传输至关重要。使用 表单数据 无需转换为字符串即可正确发送文件，解决图片丢失的问题。

在后端，Django 的 请求文件 必须用于检索上传的文件。调试至关重要，仔细关注文件处理过程可以解决大多数错误，使图像上传和处理按预期进行，不会出现 400 错误。