croppie js上传后不裁剪图像

Question

我正在使用裁剪来裁剪图像，然后仅上传裁剪的部分并在视图中显示裁剪的图像。 我的问题是，当我裁剪图像并将其上传时，整个图像就会上传并显示在视图中。

这是我的代码

    <script>

        $(".crop .add-image").click(function(){

            $('#toggle_crop').show();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $uploadCrop = $('#upload-demo').croppie({
                enableExif: true,
                viewport: {
                    width: 150,
                    height: 150,
                    type: 'rectangular'
                },
                boundary: {
                    width: 300,
                    height: 300
                }
            });


            $('#upload').on('change', function () {
                let reader = new FileReader();
                reader.onload = function (e) {
                    $uploadCrop.croppie('bind', {
                        url: e.target.result
                    }).then(function(){
                        console.log('jQuery bind complete');
                    });
                }
                reader.readAsDataURL(this.files[0]);
            });
        });



    </script>

            {!! Form::open(['method'=>'POST','action'=>['AdminImageController@store'],'files'=>true]) !!}

                <div class="form-group">

                    {!! Form::file('path', array('id' => 'upload')) !!}
                    {!! Form::submit('upload', null,['class'=>'btn btn-success upload-result']) !!}


    @if($images)
       
            @foreach($images as $image)
                
                    <td><img src="/images/{{$image->path}}" style="width: 300px;height:200px" alt=""></td>

              
            @endforeach
        </table>

我正在使用laravel 5.6 任何人都可以帮助我！！