Выполнение запроса с текстом и файлом не заполняет массив файловых пакетов laravel

Question

Я пытаюсь опубликовать изображение и текст через ajax на моем сервере laravel, за исключением того, что не могу добавить файл в запрос ajax.

Я попытался создать FormData и добавитьнеобходимые параметры, я также попытался сериализовать мою форму с помощью jQuery.

$("#create-post-button").click(function(){
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

        // var formData = new FormData();
        // formData.append('src', $('#src')[0].files[0]);
        // formData.append('title', $);
        // formData.append('_token', CSRF_TOKEN);
        // formData.append('_method', 'POST');

        event.preventDefault();

        console.log($('#src')[0].files[0]);
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': CSRF_TOKEN
            },
            url: '/posts/create',
            type: 'POST',
            data:
            {
                '_method': 'POST',
                '_token': CSRF_TOKEN,
                'title':$("#title").val(),
                'src': {
                    'name':$('#src')[0].files[0].name,
                    'size':$('#src')[0].files[0].size
                }
            },
            dataType: 'json'
        });
    });

Я ожидаю, что когда я дам дамп моего запроса в laravel, он будет иметь правильные параметры запроса, но также будет включать параметр $ file (FileBag)для файла, который публикуется.

РЕДАКТИРОВАТЬ: Я просмотрел ссылку @charlietfl, предоставленную в комментариях, и она мне очень помогла, поэтому вот конечный результат:

$("#create-post-button").click(function(){
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

        event.preventDefault();

        var file_data = $('#src').prop('files')[0];
        var form_data = new FormData();
        form_data.append('_method', 'POST');
        form_data.append('_token', CSRF_TOKEN);
        form_data.append('title', $('#title').val());
        form_data.append('src', file_data);

        $.ajax({
            url: '/posts/create',
            dataType: 'text',
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(){
                showSuccessUploadingPost();
            },
            error: function() {
                showErrorUploadingPost();
            }
        });
    });

Answer 1

Токен CSRF при загрузке файла требуется передать в качестве параметра GET.

$("#create-post-button").click(function(){
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    var form_data = new FormData();
    form_data.append('title', $('#title').val());
    jQuery.each(jQuery('#src')[0].files, function(i, file) {
        data.append('src', file); //use the following line to handle multiple files upload
        // data.append('src' + i, file);
    });

    $.ajax({
        url: '/posts/create?_token=' + CSRF_TOKEN,
        data: form_data,
        cache: false,
        contentType: false,
        processData: false,
        method: 'POST',
        type: 'POST', // For jQuery < 1.9
        success: function(){
            showSuccessUploadingPost();
        },
        error: function() {
            showErrorUploadingPost();
        }
    });  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form id="uploadFrm" enctype="multipart/form-data" method="post">
    <input type="file" name="src" />
    <button id="create-post-button">Upload</button>
</form>