Laravelのajaxにデータとファイルをアップロードする

Question

登録ページにBootstrap Modalを使用しています。ユーザーは自分の画像とこのフォームの情報を入力できる必要があります。

HTML

<form method="POST">  
    <center> 
     <img name="user_image" id="proPic" src="images/Profile_ICON.png"> 
    </center> 
    <center> 
     <label for="inputImg" id="upload_link"> Upload Image </label> 
     <input type="file" id="inputImg" accept="image/*"> 
    ​</center> 
    <input type="text" class="registrationForm" name="username" id="username" placeholder="Username"> 
    <center> 
     <span id="user_name_error" class="error"></span> 
    </center> 
    <input type="text" class="registrationForm" name="email" id="email" placeholder="Email ID"> 
    <center> 
     <span id="user_email_error" class="error"></span> 
    </center> 
    <input type="text" class="registrationForm" name="user_mobile_number" id="user_mobile_number" placeholder="Mobile Number"> 
    <center> 
     <span id="user_mobile_error" class="error"></span> 
    </center> 
    <input type="text" class="registrationForm" name="user_address" id="user_address" placeholder="Address"> 
    <center> 
     <span id="user_address_error" class="error"></span> 
    </center> 
    <input type="password" class="registrationForm" name="password" id="password" placeholder="Password"> 
    <center> 
     <span id="user_password_error" class="error"></span> 
    </center> 
    <input type="password" class="registrationForm" name="user_confirm_password" id="user_confirm_password" placeholder="Confirm Password"> 
    <center> 
     <span id="user_confirm_error" class="error"></span> 
    </center> 
    <button type="button" id="registrationBtn">REGISTER</button> 
</form> 

JS/AJAX/jQueryの統合するにはどうすればよい

$("#registrationBtn").click(function(){ 
    var data = { 
     'username':$('#username').val(), 
     'email':$('#email').val(), 
     'user_mobile_number':$('#user_mobile_number').val(), 
     'user_address':$('#user_address').val(), 
     'password':$('#password').val(), 
     'user_confirm_password':$('#user_confirm_password').val() 
    }; 

    $.ajax({ 
     url: "/signUp", 
     method: 'POST', 
     headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 
     data: data, 
     //dataType: 'json', 
     success: function(data){ 
      $('#Modal-Register').modal('hide'); 
      $('#Modal-Login').modal('show'); 
     }, 
     error: function(data){ 
      var errors = data.responseJSON; 

      if (errors.hasOwnProperty('username')){ 
       $('#user_name_error').html(errors.username); 
      } 
      else { 
       $('#user_name_error').html(''); 
      } 

      if(errors.hasOwnProperty('email')){ 
       $('#user_email_error').html(errors.email); 
      } 
      else { 
       $('#user_email_error').html(''); 
      } 

      if(errors.hasOwnProperty('user_mobile_number')){ 
       $('#user_mobile_error').html(errors.user_mobile_number); 
      } 
      else { 
       $('#user_mobile_error').html(''); 
      } 

      if(errors.hasOwnProperty('user_address')){ 
       $('#user_address_error').html(errors.user_address); 
      } 
      else { 
       $('#user_address_error').html(''); 
      } 

      if(errors.hasOwnProperty('password')){ 
       $('#user_password_error').html(errors.password); 
      } 
      else { 
       $('#user_password_error').html(''); 
      } 

      if(errors.hasOwnProperty('user_confirm_password')){ 
       $('#user_confirm_error').html(errors.user_confirm_password); 
      } 
      else { 
       $('user_confirm_error').html(''); 
      } 
     } 
    }); 
}); 

コントローラ

class UserController extends Controller{ 
    public function signUp(Request $request){ 
     $this->validate($request,[ 
      'username' => 'required|max:255', 
      'email' => 'required|email|max:255|unique:users', 
      'user_mobile_number' => 'required|max:255', 
      'user_address' => 'required', 
      'password' => 'required|min:6', 
      'user_confirm_password' => 'required|same:password' 
     ]); 

     $user = new User; 
     $user->username=$request->input('username'); 
     $user->email=$request->input('email'); 
     $user->user_mobile_number =$request->input('user_mobile_number'); 
     $user->user_address=$request->input('user_address'); 

     $password = Hash::make($request->input('password')); 
     $user->password = $password; 

     if ($user->save()){ 
      echo "Successfully registered"; 
     } 
     else{ 
      echo "Failed to register"; 
     } 
    } 
} 

このコードにプロフィール写真を掲載していますか？ここで

Answer 1

は、私がどうなるかだそれ

• 画像は、あなたがイメージ（ID？）への参照を返すアップロードされると、画像
• のアップロードを処理するために別々のAjax呼び出しを作成し、それを置きます隠し文字で<input type="hidden" value="image_id">
• フォームを送信するときにイメージをユーザーに追加します。 Userモデルの$user->add_image($image)

もちろんこれはImageモデルとUserとImageとの関係が必要です（一から一を？）とadd_image機能

Answer 2

まず第一に のenctype = "マルチパート/フォームを追加します-data」フォームに、名前=追加 "この

01のように、あなたの

<input type="file"> 

に写真を"

<input type="file" name="photo"/> 

とこれはあなたのストレージフォルダに画像を保存しますあなたのコントローラ

$path = $request->photo->storeAs('images', 'filename.jpg'); 

に以下を追加します