如何处理接收到的数据以将其保存在数据库 Laravel 和 Ajax 中？

Question

我正在尝试在不刷新页面的情况下将具有多个图像的产品添加到数据库中，我在控制台上没有收到任何错误，但我看到了像这样开头的长文本

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

错误来自console.log(data);这一行。产品与ProductsPhoto有关系，如何让它将产品添加到数据库中？

控制器

 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
        ]);
    }
}

刀片

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

阿贾克斯

   $(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::post('seller/product', 'ProductController@store')->name('product.store');

Answer 1

根据你在cmets中添加的错误，$request->photos里面的值是不可迭代的，这是有道理的，因为你没有使用Form Data来处理上传。

普通的ajax不处理文件上传，所以你必须使用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);
            }
        });
    });
});