在 Django 中使用cropperjs 上传裁剪图像和表单

Question

我使用https://github.com/fengyuanchen/cropper/blob/master/README.md 作为裁剪函数。但是，我想提交字段对象（在本例中为标题）和裁剪后的图像。但是我在管理员上遇到了错误。当然，我在运行服务器之前已经完成了makemigrations 和migrate

Error Picture

admin.py

from django.contrib import admin
from .models import Image
# Register your models here.
class ImageAdmin(admin.ModelAdmin):
    pass

admin.site.register(Image, ImageAdmin)

models.py

from django.db import models

# Create your models here.
class Image(models.Model):
    title = models.CharField(max_length=10)
    image = models.ImageField(upload_to='images')

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

forms.py

from django import forms
from .models import Image

class ImageForm(forms.Form):
    image = forms.ImageField()
    title = forms.CharField(
        max_length=10, 
        widget=forms.TextInput(
            attrs={
                "class": "form-control", 
                "placeholder": "Title",
                }, 
                ),
                required=True
                )

views.py

from django.shortcuts import render, redirect

from .models import Image
from .forms import ImageForm
from django.http import JsonResponse
from django.http import HttpResponseRedirect



def main_view(request):

    form = ImageForm()


    if request.method == "POST":

        form = ImageForm(request.POST, request.FILES)
        if form.is_valid():

                addimage = Image(
                    title=form.cleaned_data['title'],
                    image = form.cleaned_data['image'], 
                )

                addimage.save()
    else:
        form = ImageForm()
    context = {'form': form}
    return render(request, 'photo_list.html', context)

photo_list.html

{% extends "base.html" %}

{% block javascript %}
<script>
  console.log("Hello");
  const imageBox = document.getElementById("image-box");
  const confirmButton = document.getElementById("confirm-button")
  const input = document.getElementById("id_image");
  const csrf = document.getElementsByName("csrfmiddlewaretoken")
  const imageForm = document.getElementById("image-form")

  input.addEventListener("change", () => {
    console.log("change")

    const img_data = input.files[0]
    const url = URL.createObjectURL(img_data)

    imageBox.innerHTML = `<img src="${url}" id="image" width="500px">`

    var $image = $('#image');

    $image.cropper({
      aspectRatio: 16 / 9,
      crop: function (event) {
        console.log(event.detail.x);
        console.log(event.detail.y);
        console.log(event.detail.width);
        console.log(event.detail.height);
        console.log(event.detail.rotate);
        console.log(event.detail.scaleX);
        console.log(event.detail.scaleY);
      }
    });

    // Get the Cropper.js instance after initialized
    var cropper = $image.data('cropper');

    confirmButton.addEventListener('click', () => {
      cropper.getCroppedCanvas().toBlob((blob) => {
        const fd = new FormData()
        fd.append('csrfmiddlewaretoken', csrf[0].value)
        fd.append('image', blob, 'my-image.png')
        console.log("append pass")


        $.ajax({
          type: "POST",
          url: imageForm.action,
          enctype: 'multipart/form-data',
          data: fd,
          success: function (response) {
            console.log(response)
          },
          error: function (error) {
            console.log(error)
          },
          cache: false,
          contentType: false,
          processData: false,
        })
      })
    })


  });
</script>
{% endblock %}

{% block page_content %}
<form action="/cropimage/" id="image-form" method="POST">
  {% csrf_token %}
  {{form}}
  {% comment %} <button class="btn" id="confirm-button"> confirm </button> {% endcomment %}
  <input class="btn btn-lg btn-primary btn-block" type="submit" value="Submit" id="confirm-button">
</form>
<div id="image-box" class="mb-3"> </div>

{% endblock %}

我正在关注本教程https://www.youtube.com/watch?v=oWd7SAuCIRM 基本上，我正在制作一张带有标题的图像专辑，但这次是使用cropperjs。任何解决方案或建议将不胜感激:)。

Answer 1

啊傻我啊，找了一周的解决办法后，我终于意识到我没有把和删除一些数据库缓存后。

fd.append('title', $("input[name='title']").val())

在 getCroppedCanvas() 上

有同样问题的朋友， 参考：

1. How to append more data in FormData for django?
2. OperationalError, no such column. Django
3. https://developer.mozilla.org/en-US/docs/Web/API/FormData/append