如何使用Django上传和保存图像文件?

我正在尝试使用Django上传和保存图像文件,并响应图像本身,以便在javascript函数中使用。

问题是图像没有保存,.FILES请求是空的。

在使用request.body时,我可以看到没有实际的文件路径,只有C://fakepath。

因为我希望立即保存上传的图像,所以我使用了jQueryAjax调用进行发布,然后保存数据,创建一个新对象,然后函数将返回一个成功的结果。

views.py:

    def image_feedback(request):
        if request.method == 'POST':

            image = request.FILES.get('image')

            ImagesUpload.objects.create(
                image = image,
            )

            return HttpResponse('success')

models.py:

    class ImagesUpload(models.Model):
        image = models.ImageField(upload_to=renaming_file)

        def __str__(self):
            return str(self.image)

form_template.html:



<form id="image_form" enctype="multipart/form-data">{% csrf_token %}
  <button class="btn btn-secondary" onclick="$('#id_image').click()">Import Image</button>

  {{ form_image.image }}

  <input id="hidden-submit-img" value="SUBMIT" type="submit" style="visibility:hidden">
</form>

jquery ajax 调用:

<script>



    $(document).ready(function () {
      // This jquery changes the appearance of the django { form_image }
      var imgElement = $('#id_image');

      imgElement.css('visibility', 'hidden');

      // This function triggers the hidden submit,
      //  which triggers the ajax image request
      imgElement.on({
        change: function () {
          $('#hidden-submit-img').click();
        },
      });
    });


    // This jquery is for the ajax post of the image
    $('#image_form').submit(function (event) {
      event.preventDefault();
      $.ajax({
        data: {
          image: $('#id_image').val(),
          csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        type: "POST",
        enctype: 'multipart/form-data',
        url: "{% url 'website:image-feedback' %}",
        success: function (data) {
          console.log(1);
          console.log(data)
        },
        error: function (data) {
          console.log(0);
        }

      });
    });

    </script>

我认为图像无法保存是因为JavaScript无法通过正确的路径,但是该如何解决呢?

更新:

在ajax调用中将事件从.submit更改为.change时,图像会被保存,我可以在浏览器中看到成功的console.log,但是HttpResponse('success')呈现了一个新的空白页面,其中仅包含“ succes”字眼。 如何防止HttpResponse这样做? 将事件改回.submit可以防止页面重新加载,但是无法保存图像。

这是我的新ajax调用,views.py保持不变:

// This jquery is for the ajax post of the image

    // Doing it with submit, the image wont get saved, but the request is "success"
    // $('#image_form').submit(function (event) {

    // Doing it with change, the image gets saved successfully, 
    // the console logs the success
    // but the respond loads a new page
    $('#image_form').change(function (event) {
      event.preventDefault();
      $.ajax({
        data: {
          image: $('#id_image').val(),
          csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        enctype: 'multipart/form-data',
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        success: function (data) {          
          console.log(1);
          console.log(data)
        },
        error: function (data) {
          console.log(0);
        }

      });
    });
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐