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'
        });
    });

我希望当我将$ request转储到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>

用文本和文件执行请求不会填充laravel filebag数组

1 个答案: