Javascript 我正在尝试使用ajax通过laravel中的modal上传图像

下面是我的控制器文件ServiceProviderController.php-controller

在这种情况下，我做错了什么

我得到以下错误：

exception: "Symfony\Component\HttpKernel\Exception\HttpException", file: 
  "C:\xampp\htdocs\laundry_admin\vendor\laravel\framework\src\Illumi

---

请用下面我分享的代码更新您的ajax代码，因为您有post文件数据。您需要添加

enctype:“多部分/表单数据”

因为当您将数据发布到文件时，必须添加这些内容

$.ajax({
    type: "POST",
    url: "/add_sp",
    enctype: 'multipart/form-data',
    data: $('#addform').serialize(),
    success: function (response) {
        console.log(response)
        $('#add').modal('hide')
        alert("Service Provider added Successfully");
        
    },
    error: function(error){
        console.log(error)
        alert("Service provider not added");
    }
});

---

在表单上添加

enctype:“多部分/表单数据”

这是否回答了您的问题@CBroe这根本不能回答我的问题。我也参考了很多链接，并尝试了很多，但它无法工作。我的控制器文件似乎有问题。是的，它有。无法使用jQuery的

序列化执行文件上载，您需要使用
FormData
/file API。无法使用
序列化执行文件上载。
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class ServiceProvider extends Model
{
    public $timestamps = false;
    protected $table = 'service_provider';
    protected $fillable = [
        'shop_name',
        'mobile_number',
        'shop_address',
        'shop_image',
        'latitude',
        'longitude',
        'rating',
        'delivery_days'
    ];
}

    <!-- Modal -->
    <div class="modal fade" id="add" role="dialog">
        <div class="modal-dialog">
        
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Service Provider</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form class="" id="addform">
                    
                        <div class="position-relative form-group row">
                            <div class="col-md-3 my-auto text-center">
                                <label for="spname" class="">Shop Name</label>    
                            </div>
                            <div class="col-md-8">
                                <input id="spname" placeholder="Name" type="name" name="spname" class="form-control">
                            </div>
                        </div>
                        
                        <div class="position-relative form-group row">
                            <div class="col-md-3 my-auto text-center">
                                <label for="spmobile" class="">Mobile No.</label>
                            </div>
                            <div class="col-md-8">
                                <input id="spmobile" placeholder="Mobile No." type="number" name="spmobile" class="form-control">
                            </div>
                        </div>

                        <div class="position-relative form-group row">
                            <div class="col-md-3 my-auto text-center">
                                <label for="splatitude" class="">Latitude.</label>
                            </div>
                            <div class="col-md-8">
                                <input id="splatitude" type="number" name="splatitude" class="form-control">
                            </div>
                        </div>

                        <div class="position-relative form-group row">
                            <div class="col-md-3 my-auto text-center">
                                <label for="splongitude" class="">Longitude.</label>
                            </div>
                            <div class="col-md-8">
                                <input id="splongitude" type="number" name="splongitude" class="form-control">
                            </div>
                        </div>

                        <div class="position-relative form-group row">
                            <div class="col-md-3 my-auto text-center">
                                <label for="spaddress" class="">Shop Address</label>
                            </div>
                            <div class="col-md-9">
                                <textarea id="spaddress" name="spaddress" class="form-control"></textarea>
                             </div>
                        </div>
                        
                        <div class="position-relative form-group row">
                            <div class="col-md-3 my-auto text-center">
                                <label for="image" class="">logo</label>
                            </div>
                            <div class="col-md-8">
                                <input id="image" type="file" name="image" class="form-control-file">
                            </div>
                        </div>

                        <div class="position-relative form-group row">
                            <div class="col-md-3 my-auto text-center">
                                <label for="sprating" class="">Rating.</label>
                            </div>
                            <div class="col-md-8">
                                <input id="sprating"  type="number" name="sprating" class="form-control">
                            </div>
                        </div>

                        <div class="position-relative form-group row">
                            <div class="col-md-3 my-auto text-center">
                                <label for="spdeliverydays" class="">Delivery Days.</label>
                            </div>
                            <div class="col-md-8">
                                <input id="spdeliverydays" type="number" name="spdeliverydays" class="form-control">
                            </div>
                        </div>
                       
                        <div class="position-relative form-group row">
                            <div class="col-md-3 my-auto text-center">
                                <label for="exampleaddress" class="">Services</label>
                            </div>
                            
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-sm-12 col-md-6 mt-3 text-center">
                                        <label for="exampleaddress" class="mr-2">Dry Clean</label>
                                        <input type="checkbox" checked data-toggle="toggle" data-onstyle="success">   
                                    </div>
                                    <div class="col-sm-12 col-md-6 mt-3 text-center">
                                        <label for="exampleaddress" class="mr-2">Wash & Fold</label>
                                        <input type="checkbox" checked data-toggle="toggle" data-onstyle="success">   
                                    </div>
                                    <div class="col-sm-12 col-md-6 mt-3 text-center">
                                        <label for="exampleaddress" class="mr-2">Wash & Iron</label>
                                        <input type="checkbox" checked data-toggle="toggle" data-onstyle="success"> 
                                    </div>
                                    <div class="col-sm-12 col-md-6 mt-3 text-center">
                                        <label for="exampleaddress" class="mr-2">Stream Press</label>
                                        <input type="checkbox" checked data-toggle="toggle" data-onstyle="success"> 
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-center">
                            <button type="submit" id="addserviceprovider" class="mt-1 btn-wide btn-pill btn-shadow btn-hover-shine btn btn-primary">Submit
                            </button>
                        </div>
                    </form>
                </div>
          </div>
          
        </div>
    </div>


<script type="text/javascript">
    $(document).ready(function(){

        $('#addform').on('submit', function(e){
            e.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "POST",
                url: "/add_sp",
                data: $('#addform').serialize(),
                success: function (response) {
                    console.log(response)
                    $('#add').modal('hide')
                    alert("Service Provider added Successfully");
                    
                },
                error: function(error){
                    console.log(error)
                    alert("Service provider not added");
                }
            });
        });

    });
</script>




</html>

Route::post('/add_sp','ServiceProviderController@store');

$.ajax({
    type: "POST",
    url: "/add_sp",
    enctype: 'multipart/form-data',
    data: $('#addform').serialize(),
    success: function (response) {
        console.log(response)
        $('#add').modal('hide')
        alert("Service Provider added Successfully");
        
    },
    error: function(error){
        console.log(error)
        alert("Service provider not added");
    }
});