Laravel 5.4如何捕获Ajax请求负载中的文件数据？

我来帮你排查这个问题！先梳理下你给出的代码细节：

1. Blade模板中的表单代码 #

<form id="read-data-form" name="form" method="post" enctype="multipart/form-data" class="form-horizontal"> 
    <div class="row"> 
        <div class="col-md-6"> 
            <div class="form-group"> 
                <input name="comCode" id="comCode" type="hidden" value=""/> 
                <label><span class="text-danger">*</span> Upload File :</label> 
                <input name="file" id="fileToUpload" type="file" accept="text/*" /> 
            </div> 
        </div> 
    </div> 
    <div class="row"> 
        <div class="col-md-6"></div> 
        <div class="col-md-6 "> 
            <div class="text-right"> 
                <button type="submit" class="btn operations-btn btn-default" id="upload">Upload</button> 
                <button type="button" class="btn operations-btn btn-default" id="stop">Stop</button> 
            </div> 
        </div> 
    </div> 
</form>

2. JS中的Ajax请求代码 #

$("form #read-data-form").submit(function(e) { 
    e.preventDefault(); 
    var formData = new FormData(this); 
    var promise = $.ajax({ 
        url: 'read_data/file/check', 
        headers: { 
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
        }, 
        type: 'POST', 
        data: formData, 
        cache: false, 
        contentType: false, 
        processData: false, 
        encode: true 
    }); 
    promise.done(function(response){ }); 
    promise.fail(function(error){ }); 
    promise.always(function(){ }); 
});

3. 请求负载截图 #

4. 路由定义（web.php） #

Route::post('read_data/file/check', 'ReadDataController@checkFile');

5. 控制器方法（ReadDataController.php） #

public function checkFile(Request $request) { 
    $comCode = trim($request->comCode); 
    $file = $request->file('file'); 
    dd($file); 
}

6. dd()输出截图 #

问题分析与解决方案 #

从代码里我发现了核心问题：JS中的表单选择器写错了！

你写的$("form #read-data-form")是在找所有<form>标签内部、id为read-data-form的元素，但你的表单本身的id就是read-data-form，这个选择器根本找不到目标表单，导致绑定的submit事件没有正确触发，最终FormData没有收集到文件数据。

修正步骤：

把JS中的选择器改成直接通过id选择表单：

$("#read-data-form").submit(function(e) { 
    e.preventDefault(); 
    var formData = new FormData(this); 
    var promise = $.ajax({ 
        url: 'read_data/file/check', 
        headers: { 
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
        }, 
        type: 'POST', 
        data: formData, 
        cache: false, 
        contentType: false, 
        processData: false, 
        encode: true 
    }); 
    promise.done(function(response){ }); 
    promise.fail(function(error){ }); 
    promise.always(function(){ }); 
});

如果修正后还是有问题，可以额外做这几个验证：

1. 在控制器里先打印全部请求数据，确认是否收到文件：

public function checkFile(Request $request) { 
    dd($request->all()); // 先看所有请求内容
    $comCode = trim($request->comCode); 
    $file = $request->file('file'); 
    dd($file); 
}

2. 确认页面里只有一个id="read-data-form"的表单，避免id冲突
3. 检查浏览器控制台有没有JS报错，确认FormData是否被正确创建

内容的提问来源于stack exchange，提问作者Pasindu Jayanath