Загрузка изображения Laravel 5.3 с помощью ajax

Question

У меня проблема. Я разрабатываю свое веб-приложение, и я хочу, чтобы он подключился к моему API через ajax. Я пытаюсь отправить изображение на свой api через ajax из моей формы на стороне клиента, то есть в Интернете.

Итак, вот моя форма на стороне клиента ..

{{ Form::open(['enctype' => "multipart/form-data", 'id' => 'addplant', 'method' => 'POST', 'files' => true, 'class' => 'col s12']) }} 
    {{ csrf_field() }} 

    <div class="row" style="margin-top:10%;"> 
     <div class="col s12 center"> 
     <img class="circle" id="image_url" src=""></a> 
     {!! Form::file('image_url', array('id' => 'image', 'class' => 'form-control')) !!} 
     </div> 
    </div> 
    <div class="row"> 
     <div class="input-field col s6"> 
     {{ Form::text('herbal_name', null, array('id' => 'herbal_name', 'class' => 'form-control validate')) }} 
     {{ Form::label('herbal_name', 'Herbal Name') }} 
     </div> 
     <div class="input-field col s6"> 
     {{ Form::text('scientific_name', null, array('id' => 'scientific_name', 'class' => 'form-control validate')) }} 
     {{ Form::label('scientific_name', 'Scientific Name') }} 
     </div> 
    </div> 
{{ Form::submit('Add plant', array('class' => 'btn btn-primary right add')) }} 
{{ Form::close() }} 

Вот мой Аякса, все еще на стороне клиента

<script type="text/javascript"> 
$(".add").click(function() { 
    $.ajax({ 
     url: 'http://127.0.0.1/identificare_api/public/api/plants', 
     data: new FormData($("#addplant")[0]), 
     type: "POST", 
     success: function(msg) { 
      console.log(msg); 
     }, 
     error: function(){ 
      alert('pangit'); 
     } 
    }); 
}); 
</script> 

EDIT: и в моем апи, я просто этот

return json_encode($request->file('image_url')); 

Что мне здесь не хватает? Я что-то пропустил?

UPDATE: Я пытался применить ответ @bfcior, но когда я пытаюсь console.log(base64img), он будет возвращать эту очень длинную строку, и это больше, чем вы ожидали.

click for image

Answer 1

Я не совсем уверен, что это проблема, но вы не должны использовать кнопки вместо того, чтобы представить? Я бы предположил, что использование submit предотвращает работу ajax, потому что форма отправляется на сервер для обработки.

EDIT: Что происходит, когда вы нажимаете кнопку отправки? Сообщаем нам, что пользователи stackoverflow диагностируют проблему.

Answer 2

Вы обрабатываете файл с помощью:

$request->file('image_url'); 

https://laravel.com/docs/5.3/requests#files

Answer 3

Другой подход заключается в преобразовании IMG в base64 и передать его как парам. Затем в вашем контроллере/маршруте вы можете декодировать base64 и сохранять в файл (если это необходимо).

{{ Form::open(['enctype' => "multipart/form-data", 'id' => 'addplant', 'method' => 'POST', 'files' => true, 'class' => 'col s12']) }} 
    <div class="row" style="margin-top:10%;"> 
     <div class="col s12 center"> 
     <img class="circle" id="image_url" src=""></a> 
     {!! Form::file('image_url', array('id' => 'image', 'class' => 'form-control')) !!} 
     </div> 
    </div> 
    <div class="row"> 
     <div class="input-field col s6"> 
     {{ Form::text('herbal_name', null, array('id' => 'herbal_name', 'class' => 'form-control validate')) }} 
     {{ Form::label('herbal_name', 'Herbal Name') }} 
     </div> 
     <div class="input-field col s6"> 
     {{ Form::text('scientific_name', null, array('id' => 'scientific_name', 'class' => 'form-control validate')) }} 
     {{ Form::label('scientific_name', 'Scientific Name') }} 
     </div> 
    </div> 
{{ Form::submit('Add plant', array('class' => 'btn btn-primary right add')) }} 
{{ Form::close() }} 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $.ajaxSetup({ 
     headers: { 
      'X-CSRF-TOKEN': '{{ csrf_token() }}' 
     } 
    }); 

    var base64img = null; 

    $(document).ready(function() { 
     $('#image').change(function(){ 

      var file = this.files[0]; 
      var reader  = new FileReader(); 

      reader.addEventListener("load", function() { 
       base64img = reader.result; 
      }, false); 


      if (file) { 
       reader.readAsDataURL(file); 
      } 

     }); 

     $(".add").click(function(e) { 

      e.preventDefault(); 

      $.ajax({ 
       url: 'http://127.0.0.1:8000/identificare_api/public/api/plants', 
       data: $("#addplant").serialize() + '&image_url=' + base64img, 
       type: "POST", 
       success: function(msg) { 
        console.log(msg); 
       }, 
       error: function(){ 
        alert('pangit'); 
       } 
      }); 
     }); 
    }); 
</script> 

и маршрут

Route::post('identificare_api/public/api/plants', function (Request $request) { 
    return json_encode($request->all()); 
});