Javascript 使用crapper.js和Django 2.2.7上载裁剪的图片失败

我正在尝试制作一个表单，用于查看用户配置文件并显示用户的图片。我已经做了一个自定义的用户类，并添加了新的领域与个人资料图片头像。这个想法是，当用户在查看个人资料时，他可以点击他的图片，模式表单会弹出显示的当前图片或看起来像匿名用户的默认图片。然后，用户可以点击上传任意大小的新图片，并使用croper.js将其裁剪为设置为220 x 300像素的标准格式

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

因此，我希望保存图片的部分是从模式表单触发的，它是用javascript编写的，用于从crapper.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">

---

我做错了什么？

您可以安装django图像裁剪，您的问题将得到解决：

---

可能截取的图片根本没有发送，请检查您的js文件，并显示您在哪里进行查询以提交图片@Lemayzeur实际上，我可以通过在表单发布时打印request.FILES from views.py来看到文件已发布到表单