画像アップロードLaravel 5.3 ajaxを使用して

Question

ここに問題があります。私は自分のWebアプリケーションを開発しており、それをajaxを使ってAPIに接続したいと思っています。私はWebであるクライアント側で私のフォームからajaxを使って私のapiに画像を送信しようとしています。

だから、ここに私のフォームは、クライアント側にあります..ここ

{{ 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() }} 

は私のAJAXだ、まだクライアント側の

<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：と私のAPIで、私はこの1つだけを持っています

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

私はここで何が欠けていますか？私は何かを忘れましたか？

UPDATE：私は@bfciorの答えを適用しようとしましたが、私はconsole.log(base64img)しようとすると、それはこの非常に長い文字列を返しますし、それはもはやあなたが予想以上です。私は、これは問題がある場合は、完全にはよく分からないが、あなたが代わりに提出するのボタンを使用してすることになっていません

click for image

Answer 1

？私はフォームが処理のためにサーバーに提出されているため、送信がajaxの動作を妨げていると思います。

EDIT：送信ボタンをクリックするとどうなりますか？私たちに伝えることは、スタックオーバーフローのユーザーが問題を診断するのに役立ちます。

Answer 2

あなたが使用してファイルを扱う：

$request->file('image_url'); 

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

Answer 3

別のアプローチは、BASE64に変換のimgとPARAMとしてそれを渡すことです。あなたのコントローラ/ルートでは、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()); 
});