Laravel 5-具有CSRF保护的AJAX图像上传

Lovelock 发表于 Dev

拉夫洛克

我已设置要上传图片的表单。我以前使用的是DropZone.js，它工作正常，并与ajax调用一起发送了CSRF令牌。一切服务器端都很好，但是当尝试在没有DropZone的情况下执行此操作时，出现令牌不匹配错误。

这是我的AJAX呼叫：

    $(document).on('submit', ".hidden-image-upload", function(e){
    e.preventDefault();
    $.ajax({
        url:'/project/uploadImage',
        data:{
            data:new FormData($("#upload_form")[0]),
        },
        dataType:'json',
        async:false,
        type:'post',
        processData: false,
        contentType: false,
        success:function(response){
            console.log(response);
        },
    });
});

这是HTML：

<form method="POST" action="http://localhost/project/create" accept-charset="UTF-8" class="hidden-image-upload">
    <input name="_token" type="hidden" value="5lgtt8AgbeF3lprptj8HNXVPceRhoJbqBeErBI1k">
    <input class="cover-image-upload-button" name="file" type="file">
</form>

我该如何整理我的AJAX呼叫/ Laravel以便一起工作？

卡洛斯·阿劳兹（Carlos Arauz）

您可以使用$ .ajax在标头中发送令牌。

$(document).on('submit', ".hidden-image-upload", function(e){
    e.preventDefault();
    $.ajax({
        url:'/project/uploadImage',
        data:{
            data:new FormData($("#upload_form")[0]),
        },
        headers: {
           'X-CSRF-Token': $('form.hidden-image-upload [name="_token"]').val()
        }
        dataType:'json',
        async:false,
        type:'post',
        processData: false,
        contentType: false,
        success:function(response){
            console.log(response);
        },
    });
});