How to send a dynamic image to PHP with jQuery ajax function

Question

I have a blank div, which dynamically receives an image, almost as soon as the page loads, this image is the Crop of the original image, I’m able to catch it through the code:
$('.class > img')
However when I play this in the ajax function, it returns me the HTTP number 500
I think it’s the names I’m passing to PHP.

Code jQuery:

$("#enviar").click(function() {
        console.log($('.image-preview > img')[0] );
        $.ajax({
            url:"{{ route('receber.imagem') }}",
            data:{
                data:new FormData($(".img-preview > img")[0]),
            },
            dataType:'json',
            async:false,
            type:'post',
            processData: false,
            contentType: false,
            success:function(response){
                console.log(response);
            }
        });
    });

PHP Code, PS:I’m using Laravel 5.4.

public function RecebeImagem(Request $request)
{
    if($request->hasFile('img-preview'))
    {
        $imagem     = $request->file('img-preview');
        $numero     = rand(1111,9999);
        $diretorio  = "img/uploads";
        $extensao   = $imagem->guessClientExtension();
        $nomeImagem = "imagem_".$numero.".".$extensao;
        $imagem->move($diretorio, $nomeImagem);
        $caminho = $diretorio."/".$nomeImagem;
        //dd($caminho);
        return 'Imagem upada';
    }

    return 'Imagem não upada';
}`  

HTML code:

<div class="row">
  <div class="col-md-6">
     <div class="image-crop">
         <img src="{{ asset('img/profile_small.jpg') }}">
     </div>
  </div>
  <div class="col-md-6">
     <h4>Preview image</h4>
     <div class="img-preview img-preview-sm"></div>
        <h4>Comon method</h4>
        <p>You can upload new image to crop container and easy download new cropped image.</p>
           <div class="btn-group">
              <label title="Upload image file" for="inputImage" class="btn btn-primary">
              <input type="file" accept="image/*" name="file" id="inputImage" class="hide">Upload new image</label>
              <label title="Enviar" id="enviar" class="btn btn-primary">Enviar</label>
            </div>
               <h4>Other method</h4>
               <p>You may set cropper options with <code>$(image}).cropper(options)</code></p>
                <div class="btn-group">
                <button class="btn btn-white" id="zoomIn" type="button">Zoom In</button>
                <button class="btn btn-white" id="zoomOut" type="button">Zoom Out</button>
                <button class="btn btn-white" id="rotateLeft" type="button">Rotate Left</button>
                button class="btn btn-white" id="rotateRight" type="button">Rotate Right</button>
                 <button class="btn btn-warning" id="setDrag" type="button">New crop</button>
               </div>
            </div>  

Code Crop:
var $image = $(".image-crop > img") $($image).cropper({ aspectRatio: 1.618, preview: ".img-preview", done: function(data) { // Output the result data for cropping image. } }); This PHP code I used to upload an image.
There is no import error in HTML, I am 99% sure it is the problem are the Names, and as I know only the basics of jQuery is hard to debug and find where the error is. PS: I can’t return anything from PHP to the Ajax function.