javascript - 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有关系，如何让它将该产品添加到数据库中？

Controller

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

Blade

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

Answer 1

根据您在评论中添加的错误，$request->photos 中的值不可迭代，这是有道理的，因为您不使用表单数据来处理上传。

普通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);
            }
        });
    });
});