使用cropper.js 和 Django 2.2.7 上传裁剪的图片失败

Question

我正在尝试制作一个查看用户个人资料并显示用户图片的表单。我创建了一个自定义用户类并添加了带有个人资料图片（头像）的新字段。想法是，当用户查看个人资料时，他可以单击他的图片，并弹出显示当前图片（或看起来像匿名用户的默认图片）的模式表单。然后用户可以点击上传任意大小的新图片并使用cropper.js将其裁剪为设置为220 x 300像素的标准格式。

为了开发这个，我在 Internet 上收集了几个示例并将它们混合在一起。它可以完美地工作，直到我希望将新图片保存在用户数据库中，这只是被忽略，没有任何错误显示。当然，当我从管理界面执行此操作并上传图片时，它每次都能正常工作。

所以，我希望保存图片的部分是从模态表单触发的，它是用javascript编写的，用于从cropper.js中获取数据：

  $(".js-crop-and-upload").click(function () {

        var cropData = $image.cropper("getData");

        $("#id_x").val(cropData["x"]);
        $("#id_y").val(cropData["y"]);
        $("#id_height").val(cropData["height"]);
        $("#id_width").val(cropData["width"]);

        $("#formUpload").submit();
        console.log("BIO C&U");
        $("#modalCrop").modal("hide")
    });

我在提交时为表单创建了一个新的保存功能，用于实际裁剪：

class ProfileForm(ModelForm):
    x = forms.FloatField(widget=forms.HiddenInput())
    y = forms.FloatField(widget=forms.HiddenInput())
    width = forms.FloatField(widget=forms.HiddenInput())
    height = forms.FloatField(widget=forms.HiddenInput())

    class Meta:
        model = user
        fields = ('avatar', 'x', 'y', 'width', 'height',)

    def __init__(self, *args, **kwargs):
        super(ProfileForm, self).__init__(*args, **kwargs)

    def save(self):
         profile = super(ProfileForm, self).save()
         x = self.cleaned_data.get('x')
         y = self.cleaned_data.get('y')
         w = self.cleaned_data.get('width')
         h = self.cleaned_data.get('height')

         image = Image.open(profile.avatar)
         cropped_image = image.crop((x, y, w + x, h + y))
         resized_image = cropped_image.resize((220, 300), Image.ANTIALIAS)
         resized_image.save(profile.avatar.path)
         image.save(profile.avatar.path)

         return profile

我的表单有一个 enctype 集：

 <form method="post" enctype="multipart/form-data" action="" id="formUpload">

我做错了什么？

Answer 1

您可以安装 django-image-cropping，您的问题将得到解决：

https://pypi.org/project/django-image-cropping/