dd($request->all()) 通過 ajax laravel 上傳文件時的空數組

Question

首先，我嘗試通過 ajax 上傳文件，當我在控制器中嘗試dd($request->all())時，它給出結果為empty array

public function uploadFile(Request $request){
   
    dd($request->all());

}

我的刀片視圖與 ajax

<label for="inputfile">
  <a  title="Click here to upload record "><i class="fa fa-upload"></i></a>
</label>
    <input id="inputfile" name="inputfile" type="file" />



 <script>

 $('#inputfile').on('change',function(ev){
   ev.preventDefault(); 
   var postData=new FormData();
   postData.append('file',this.files[0]);
    
      $.ajax({
            url:'{{url('reporting/uploadFile')}}',
            headers:{'X-CSRF-Token':$('meta[name=csrf_token]').attr('content')},
            type:"get",
            contentType:false,
            data:postData,
            processData:false,
            dataType:'json',
            success: function( data ) {
               console.log(data)
            },
            error: function() {
                alert('error');
            }    });    }); 
    </script>

我的 Laravel 版本是 5.8 。 流程是當用戶上傳附件時，它會直接存儲到文件存儲中，無需點擊提交按鈕。 但是當我嘗試檢索 $request->all() 它返回空數組時，我無法繼續下一步。 對不起，如果我的解釋不清楚。

Answer 1

請確保您正確使用表單多部分設置。 這通常是大多數情況下的問題。

<form action="upload.php" method="post" enctype="multipart/form-data">

Answer 2

是的，laravel 有時真的很痛苦，尤其是在文件上傳方面。

你可以在 laravel 5.8 上試試這篇文章，試試看，讓我知道它是否有效。

https://www.w3adda.com/blog/laravel-5-8-jquery-ajax-form-submit

我認為這篇文章的主要區別在於它在ajax調用中設置數據的方式。 但是，您可能需要檢查整篇文章並將其與您的代碼進行比較。

 $.ajax({
  url: "{{ url('jquery-ajax-form-submit')}}",
  method: 'post',
  data: $('#contact_us').serialize(),

Answer 3

 let files = $('#inputfile');
    let image = files[0].files;

let form_data = new FormData();
    if (image.length > 0) {
        for (let i = 0; i < image.length; i++)
            form_data.append('inputfile[]', image[i]);
    }


            $.ajax({
            url:'{{url('reporting/uploadFile')}}',
            headers:{'X-CSRF-Token':$('meta[name=csrf_token]').attr('content')},
            type:"get",
            contentType:false,
            data:form_data,
            processData:false,
            dataType:'json',
            success: function( data ) {
               console.log(data)
            },
            error: function() {
                alert('error');
            }    
            });    
          }); 

嘗試這個。

Answer 4

您只需要在標題中設置“Content-Type”。 你也有 pass 類型 get，文件上傳必須需要 post。 你有 console.log(this.files[0]);

<script>

 $('#inputfile').on('change',function(ev){
   ev.preventDefault(); 
   console.log(this.files[0]);
   var postData=new FormData();
   postData.append('file',this.files[0]);
    
      $.ajax({
            url:'{{url('reporting/uploadFile')}}',
            headers:{
               'X-CSRF-Token':$('meta[name=csrf_token]').attr('content'),
               'Content-Type': undefined 
            },
            type:"POST",
            data:postData,
            success: function( data ) {
               console.log(data)
            },
            error: function() {
                alert('error');
            }    });    }); 
    </script>