如何在Django中使用Ajax和FormData保存和上传图像

如何解决如何在Django中使用Ajax和FormData保存和上传图像

我正在尝试在Django中使用Ajax和FormData保存和上传图像，但这给了我这个错误：

禁止（CSRF令牌丢失或不正确。）： / employee / ajax / employee-photo /

那么，这里的解决方案是什么？

我们将不胜感激任何帮助。

models.py：

class Employee(models.Model):

    photo = models.ImageField(upload_to=image_upload_path,null=True)

urls.py：

urlpatterns = [

    path('ajax/employee-photo/',EmployeePhotoAJAX.as_view(),name="ajax-employee-photo"),]

views.py：

class EmployeePhotoAJAX(LoginRequiredMixin,View):
    login_url = '/authentication/login/'

    def get(self,request):
        if request.method == 'GET':
            if request.is_ajax():
                id = request.GET.get("id",None)
                print(id)
                image = request.FILES.get('profileImage')
                print(image)
                employee = Employee.objects.get(id=id)
                if employee:
                    employee.photo = image
                    employee.save()
                    response_data = {
                        'url': employee.photo.url,}


                    return JsonResponse(response_data)

html

<div class="profile_img">
  <div id="crop-avatar">
    <form method="POST" id="ajax" enctype="multipart/form-data">
      {% csrf_token %}
      <input id="profile_image_input" type="file" name="profileImage" value="">
    </form>
   </div>
</div>

js：

$("#profile_image_input").change(function(e) {
    e.preventDefault();  // disables submit's default action
    var data = new FormData($("#ajax").get(0));

    console.log(data);

    $.ajax({
        url: '{% url "employee:ajax-employee-photo" %}',type: 'POST',data: {
              "id": "{{ employee.id }}","employee_photo": data,"csrfmiddlewaretoken": "{{ csrf_token }}",},dataType: "json",processData: false,contentType: false,success: function(data) {
                data = JSON.parse(data); // converts string of json to object
                $("#photo").empty();
                $("#photo").html('<img class="img-responsive avatar-view" src="' + data.url +'"/>');
            }
        });
        return false;
    });