我无法使用ajax传递img？

Question

我试图在添加新航空公司时包含徽标，但我不知道如何使用 ajax 将文件类型的输入传递到控制器。我尝试使用 FormData()。我没有收到任何错误，但文件没有传递到控制器我查看了一些与我的问题类似的问题，但我找不到解决方案。

<form action="javascript:void(0)" id="addEditBookForm" name="addEditBookForm" class="form-horizontal" method="POST" enctype="multipart/form-data">
              <input type="hidden" name="id" id="id">
              <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-12">
                  <input type="text" class="form-control" id="name" name="name" placeholder="Enter Airline Name" value="" maxlength="50" required="">
                </div>
              </div>  
              <div class="form-group">
                <label for="name" class="col-sm-2 control-label">country</label>
                <div class="col-sm-12">
                  <input type="text" class="form-control" id="country" name="country" placeholder="Enter Airline country" value="" maxlength="50" required="">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">Logo</label>
                <div class="col-sm-12">
                  <input type="file" class="form-control" id="logo" name="logo" placeholder="Enter Airline Code" value="" required="">
                </div>
              </div>
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary" id="btn-save" value="addNewBook">Save changes
                </button>
              </div>
            </form>

ajax：

  $('body').on('click', '#btn-save', function (event) {
      event.preventDefault()
          var id = $("#id").val();
          var name = $("#name").val();
          var country = $("#country").val();
          let logo = new FormData(document.getElementById("addEditBookForm"));
          $("#btn-save").html('Please Wait...');
          $("#btn-save"). attr("disabled", true);
         
        // ajax
       
        $.ajax({
            type:"POST",
            url: "{{ url('admin/add-update-Airlines') }}",
            data: {
              id:id,
              name:name,
              country:country,
              logo:logo,
            },
            contentType: false,
            processData:false,
            cache: false,
            dataType: 'json',
            success: function(res){
             window.location.reload();
            $("#btn-save").html('Submit');
            $("#btn-save"). attr("disabled", false);
            Swal.fire(
            'Good job!',
            'You clicked the button!',
            'success'
            )
           }
        
        });
      
    });

控制器：

 public function store(Request $request)
    {
        

        $newImgName = time() . '-' . $request->name . '.' .$request->logo->extension();
        $request->logo->move(public_path('img'),$newImgName);
        $Airline   =   Airline::updateOrCreate(
                    [
                        'id' => $request->id
                    ],
                    $request->validate([
                        'name' => ['required', 'string', 'max:255'],
                        'country' => ['required', 'string', 'max:255'],
                        'logo' => ['required|mimes:ipg,png,jpeg|max:5048'],            
                    ]),
                   
                    [
                        'name' => $request->name, 
                        'country' => $request->country,
                        'logo' => $newImgName,
                    ]);
    
                 return response()->json(['success' => true]);
    }

Answer 1

首先是 csrf 令牌没有传递给 ajax，所以更改形式如下。也更新了

<form action="{{ url('admin/add-update-Airlines') }}" id="addEditBookForm" name="addEditBookForm" class="form-horizontal" method="POST" enctype="multipart/form-data">
         @csrf
            <input type="hidden" name="id" id="id">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="name" name="name" placeholder="Enter Airline Name" value="" maxlength="50" required="">
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">country</label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="country" name="country" placeholder="Enter Airline country" value="" maxlength="50" required="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Logo</label>
                <div class="col-sm-12">
                    <input type="file" class="form-control" id="logo" name="logo" placeholder="Enter Airline Code" value="" required="">
                </div>
            </div>
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary" id="btn-save" value="addNewBook">Save changes
                </button>
            </div>
        </form>

然后在 ajax 中我简化了测试，以便您可以根据需要进行修改

$(document).on('click', '#btn-save', function(e) {
            e.preventDefault()
            var url = $("#applicationForm").attr('action');
            let myForm = document.getElementById('addEditBookForm');
            let formData = new FormData(myForm);
            $.ajax({
                type:"POST",
                url:url,
                data: formData,
                contentType: false,
                processData:false,
                cache: false,
                dataType: 'json',
                success: function(res){

                }

            });

        });

验证

public function store(Request $request)
{
        
   $request->validate([
            'name' => ['required', 'string', 'max:255'],
            'country' => ['required', 'string', 'max:255'],
            'logo' => ['required','mimes:ipg,png,jpeg','max:5048'],
        ]);
}