Comment gérer les données reçues pour les sauvegarder dans la base de données Laravel et Ajax?

joh

J'essaie d'ajouter le produit avec plusieurs images à la base de données sans actualiser la page, je n'obtiens aucune erreur sur la console mais je vois le long texte qui commence comme ça 

<script> Sfdump = window.Sfdump || (function (doc) { var refStyle = doc.createElement('style'), rxEsc = /([.*+?^${}()|\[\]\/\\])/g, idRx = /\bsf-dump-\d+-ref[012]\w+\b/, keyHint = 0 <= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl', addEventListener = ....

et l'erreur vient de cette ligne console.log(data);. Le produit a une relation avec ProductsPhoto, comment puis-je lui faire ajouter le produit à la base de données?

Manette

 public function store(Request $request)
 {
    $formInput=$request->except('filename');

    $product = product::create(array_merge($formInput, [
        'seller_id'=> Auth::user()->id,
        'user_id' => Auth::user()->id
    ]));
    foreach ($request->photos as $photo) {
       $filename = $photo->store('public/photos');
        ProductsPhoto::create([
            'product_id' => $product->id,
            'filename' => $filename
        ]);
    }
}

Lame

  <div class="panel-body">

   <input type="hidden" value="{{csrf_token()}}" id="token"/>

     <label for="pro_name">Name</label>
      <input type="text" class="form-control" name="pro_name" id="pro_name" placeholder="Enter product name">

        <label for="pro_price">Price</label>
           <input type="text" class="form-control" name="pro_price" id="pro_price" placeholder="Enter price">

        <label for="pro_info">Description</label>
         <input type="text" class="form-control" name="pro_info" id="pro_info" placeholder="Enter product description">

           <label for="stock">Stock</label>
            <input type="text" class="form-control" name="stock" id="stock" placeholder="Enter stock">

        <label  for="category_id">Choose Category</label>
           <select name="category_name" id="category_name">
             <option value=""> --Select Category -- </option>
               @foreach ($categoryname_array as $data)
                <option value="{{ $data->name }}"  >{{$data->name}}</option>
                 @endforeach
               </select>

 <label for="photos">Choose 5 Images</label>
  <input  "multiple="multiple" id="photos" name="photos[]" type="file">

  <input type="submit" class="btn btn-primary" value="Submit" id="btn"/>

</div>

Ajax

   $(document).ready(function(){
   $("#btn").click(function(){
    var category_name = $("#category_name").val()
    var pro_name = $("#pro_name").val();
    var pro_price = $("#pro_price").val();
    var stock = $("#stock").val();
    var pro_info = $("#pro_info").val();
    var photos = $("#photos").val();
    var token = $("#token").val();

    $.ajax({

        type: "post",
        data: "pro_name=" + pro_name + "&pro_price=" + pro_price + "&stock=" + stock + "&_token=" + token + "&category_name=" + category_name + "&pro_info=" + pro_info + "&photos=" + photos,
        url: "<?php echo url('seller/product') ?>",
        success:function(data){
        console.log(data);
        }

    });
  });
});

Route

 Route::post('seller/product', 'ProductController@store')->name('product.store');
MEDZ

Selon l'erreur que vous avez ajoutée dans les commentaires, la valeur à l'intérieur $request->photosn'est pas itérable, ce qui est logique car vous n'utilisez pas les données de formulaire pour gérer le téléchargement.

Ajax normal ne gère pas le téléchargement de fichiers, vous devez donc utiliser formData :

var token = $("#token").val();
$(document).ready(function(){
    $("#btn").click(function(){
        var form = $('form')[0]; // You need to use standard javascript object here
        var formData = new FormData(form);
        formData.append('_token', token); // adding token
        $.ajax({
            url: "<?php echo url('seller/product') ?>",
            data: formData, //just that without variables
            type: 'POST',
            contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
            processData: false, // NEEDED, DON'T OMIT THIS
            success:function(data){
                console.log(data);
            }
        });
    });
});

Articles connexes