图像未传递给视图cropperjs、django、ajax

编程问答 2022-05-01

问题描述

我有一个用户配置文件，他可以在其中裁剪图像，因此在裁剪和打印视图中的数据后，没有任何内容传递给视图 表格

 <form method="post" action="change_photo/" id="avatar_changing_form">
                {% csrf_token %}
                <label for="upload_image">
                    {% if item.image%}
                    <img src="{{item.image.url}}" alt="" style="max-height:300px">
                    {%else%}
                    <img src="{%static 'avatar_sample.png' %}" id="uploaded_image"
                        class="img-responsive img-circle" />
                    {%endif%}
                    <div class="overlay">
                        <div class="text">Click to Change Profile Image</div>
                    </div>
                    <!-- <input type="file" name="image" class="image" id="upload_image" style="display:none" /> -->
                    {{imageForm.image}}
                </label>
            </form>

JS 和 Ajax

 $(document).ready(function(){
  const imageForm = document.getElementById('avatar_changing_form')
    const confirmBtn = document.getElementById('crop')
    const input = document.getElementById('upload_image')
    const csrf = document.getElementsByName('csrfmiddlewaretoken')


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

    var image = document.getElementById('sample_image');

    var cropper;

    $('#upload_image').change(function (event) {
                        var files = event.target.files;

                        var done = function (url) {
                            image.src = url;
                            $modal.modal('show');
                        };

                        if (files && files.length > 0) {
                            reader = new FileReader();
                            reader.onload = function (event) {
                                done(reader.result);
                            };
                            reader.readAsDataURL(files[0]);
                        }
                    });

                    $modal.on('shown.bs.modal',function () {
                        cropper = new Cropper(image,{
                            aspectRatio: 1,viewmode: 3,preview: '.preview'
                        });
                    }).on('hidden.bs.modal',function () {
                        cropper.destroy();
                        cropper = null;
                    });

                    $('#crop').click(function () {
                        cropper.getCroppedCanvas().toBlob((blob) => {
                            console.log('confirmed')
                            const fd = new FormData();
                            fd.append('csrfmiddlewaretoken',csrf[0].value)
                            fd.append('file',blob,'my-image.png');

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

查看

def change_photo(request):
    if request.user.is_authenticated and Guide.objects.filter(user = request.user).exists():
        item = Guide.objects.get(user=request.user)
        if request.method == "POST":
            Photoform = ChangeImageForm(request.POST or None,request.FILES or None,instance = item)
            if Photoform.is_valid():
                print(Photoform.cleaned_data['image'])
                Photoform.save()
    return HttpResponseRedirect('/profile/')

表格

class ChangeImageForm(ModelForm):
class Meta:
    model = Guide
    fields = ['image']
def __init__(self,*args,**kwargs):
    super(ChangeImageForm,self).__init__(*args,**kwargs)
    self.fields['image'].widget = FileInput(attrs={
        'name':'image','class':'image','id':'upload_image','style':'display:none'
    })

当我从终端中清理过的数据打印图像字段时显示“无”，当我通过管理加载图像时一切正常，请有人告诉我问题出在哪里？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajaxcropperjsdjangodjango-forms