Django ajax图片上传和裁剪图片保存

Question

I want to upload image with ajax, crop the uploaded image and save the image.

I uses pillow 5.1.0., django 2.0.5.

models.py:

class TestPhoto(models.Model):
    file = models.ImageField()

forms.py:

class TestPhotoFrom(forms.ModelForm):
    # this is not necessary part, you can ignore it.
    x = forms.FloatField(widget=forms.HiddenInput())
    y = forms.FloatField(widget=forms.HiddenInput())

    class Meta:
        model = TestPhoto
        fields = ('file', 'x', 'y',)

template.html:

  <form method="post" enctype="multipart/form-data" id="formUpload">
    {% csrf_token %}
    {{ form }}
  </form>
<button class="js-crop-and-upload">button</button>
<script>
$(function () {
$(".js-crop-and-upload").click(function () {
        //Get file from form.
        var form_upload = $("#formUpload")[0];
        var form_data = new FormData(form_upload);
        //Send file with ajax.
        $.ajax({
            url:'/crop/',
            type:'post',
            dataType:'json',
            cache:false,
            processData: false,
            contentType: false,
            data:{
                'file': form_data,
                'value': 'test_value',
            },
            success:function (data) {
                console.log(data)
            }
        });
      });
});
</script>

views.py:

def crop(request):
    if request.method == "GET":

        form = TestPhotoFrom()
        return render(request, 'authapp/crop.html', {'form': form})
    else:
        if request.is_ajax():
            # get file from request.
            file = request.FILES
            image = Image.open(file)
            # cropping image
            cropped_image = image.crop((0, 0, 200, 200))
            resized_image = cropped_image.resize((200, 200), Image.ANTIALIAS)
            # save cropped image
            resized_image.save()
            return JsonResponse({'success': 'file_uploaded'})

I read this: https://simpleisbetterthancomplex.com/tutorial/2017/03/02/how-to-crop-images-in-a-django-application.html

And now I need to do that with jquery-ajax.

But when I click button to do ajax request, server console is printing this error: 'MultiValueDict' object has no attribute 'read'

How can I do that?

Sorry, I don't know also whether these part on views.py is correct or not:

image = Image.open(file)
cropped_image = image.crop((0, 0, 200, 200))
resized_image = cropped_image.resize((200, 200), Image.ANTIALIAS)
resized_image.save()

But before checking it, I cannot solve this: 'MultiValueDict' object has no attribute 'read'

Question.1: How can I solve 'MultiValueDict' object has no attribute 'read' ?

Question.2: Is this part correct? Or will it be working well?

image = Image.open(file)
cropped_image = image.crop((0, 0, 200, 200))
resized_image = cropped_image.resize((200, 200), Image.ANTIALIAS)
resized_image.save()

Because I'm very newbie in uploading image with ajax on django very little, I want your explanation or modification.

Thanks for reading poor question.

Answer 1

I can only give you an answer for the ajax side
When using FormData, you have to pass it as the data parameter.
If you want to add other fields you will use append()
#formUpload would be the form with the file input used to select the image.

$(".js-crop-and-upload").click(function () {
    //Get file from form.
    var form_upload = $("#formUpload")[0];
    var form_data = new FormData(form_upload);
    form_data.append('value', 'test_value');
    //Send file with ajax.
    $.ajax({
        url:'/crop/',
        type:'post',
        dataType:'json',
        cache:false,
        processData: false,
        contentType: false,
        data:form_data,
        success:function (data) {
            console.log(data)
        }
    });
});