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

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 getting 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.

jQuery code:

$("#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>  

Crop code:
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 make an image upload.
There is no import error in HTML, I'm 99% sure whats the problem is the names, and as I know just the basics of jQuery it's hard to debug and find where the error is. PS: I can not return anything from PHP to the Ajax function.