Laravel Blade表单AJAX PUT请求传文件时请求为空求助

问题描述 #

在Laravel Blade表单开发中，创建对象用POST请求、修改对象用PUT请求，需通过AJAX同时发送文件。POST请求正常工作，但PUT请求提交的内容为空。排查发现问题源于请求配置中的processData: false，移除该行则会触发Uncaught (in promise) TypeError: Illegal invocation错误——POST请求此前也遇到过该错误，正是通过添加processData: false解决的。现寻求带附件PUT请求的可行方案。

我的代码：

const type_request = 'PUT';
const url_request = '{{ route('put_update_login', ['client' => $client, 'id' => $login->id]) }}';
let data_form = new FormData(document.getElementById(id_form));
$.ajax({
    type: type_request,
    url: url_request,
    data: data_form,
    dataType: "json",
    processData: false,
    contentType: false,
    success: function(response) {
        if (response.hasOwnProperty("route")) {
            window.open(response['route'], "_self").focus();
        } else {
            $('#alert_error').removeAttr('hidden');
            $("#alert_error").fadeTo(20000, 500000);
            let errors = response['errors'];
            $.each(errors, function (index, value) {
                $("#alert_error").last().html(value);
            });
            $(':button').prop('disabled', false);
            $('#spinner_form').prop('hidden', true);
        }
    }
});

POST与PUT版本仅type_request和url_request参数不同。

解决方案 #

方法1：通过FormData添加_method字段模拟PUT请求 #

Laravel的PUT/PATCH等非POST请求本质是通过POST请求携带_method参数实现的，直接在FormData中添加该字段即可复用POST请求的成功配置：

let data_form = new FormData(document.getElementById(id_form));
// 追加_method字段，告知Laravel实际请求方法为PUT
data_form.append('_method', 'PUT');
// 将请求类型改为POST
const type_request = 'POST';

方法2：添加X-HTTP-Method-Override请求头 #

若坚持使用PUT请求类型，可在AJAX配置中添加自定义请求头，让Laravel识别实际请求方法：

$.ajax({
    type: type_request,
    url: url_request,
    data: data_form,
    dataType: "json",
    processData: false,
    contentType: false,
    // 添加请求头覆盖实际请求方法
    headers: {
        'X-HTTP-Method-Override': 'PUT'
    },
    success: function(response) {
        // 原成功回调逻辑不变
    }
});

Laravel默认支持该请求头，无需额外配置。

方法3：确保CSRF令牌和路由配置正确 #

• 确认路由定义为PUT类型：如Route::put('/path', [Controller::class, 'update'])或资源路由中的update方法
• 若表单未包含@csrf指令，手动向FormData追加CSRF令牌：

data_form.append('_token', '{{ csrf_token() }}');

内容的提问来源于stack exchange，提问作者Agustín Tamayo Quiñones