douhuanchi6586 2017-09-02 21:44
浏览 71
已采纳

Laravel - 从Ajax Post请求中获取数据

I want to upload images with ajax. I convert the image to a base64 string. Posting the data works, but how do I get it on the server (I'm using Laravel 5.4)? I can do $request->all() what gives me an array with all the images base64 strings combined. I cannot do anything with that because whatever I do with that array will result in a 500 error.

This is my script to convert the images and post them.

let queue = [];
function addFile(input) {
    let files = input.files,
        j = files.length,
        file;

    for (i = 0; i < j; i += 1) {
        let reader = new FileReader();
        reader.onloadend = function (e) {
            $('#upload-InnerPanel').append(
                "<div class='upload-ItemPanel'><img class='upload-ImagePreview' src='" + e.target.result + "' > </div>");
            queue.push(reader.result);
        };
        file = files[i];
        reader.readAsDataURL(file);
    }
}

$('#upload-ButtonSelect').on("click" , function () {
    $('#upload-UploadInput').click();
});

$('#upload-UploadInput').change(function () {
    addFile(this);
});

$('#upload-ButtonUpload').click(function () {

    $.ajax({
        url: "/admin/upload",
        type: "POST",
        data: queue,
        processData: false,
        error: function(xhr, status, error) {
            let err = xhr.responseText;
            //console.log(err);
            $('#upload-InnerPanel').append("<iframe width='600' height='500' src='" + err +"'> </iframe>")
        },
        success: function (xhr) {
            console.log(xhr);
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

});

This is my controller:

public function upload(Request $request)
{

    return var_dump($request->all());
}

That works, sort of, because My response is one long base64 in an array with just 1 item. Even if I add multiple images I just get one item in the array instead of three. It now combines them all in to one. Also, as I said. I cannot do anything with that array what does not result in a 500 error.

So my question is:

How do I get it to work so I can post multiple items instead of one and get the data on the backend?

  • 写回答

1条回答 默认 最新

  • douyao1994 2017-09-03 11:28
    关注

    You could add each file as a new input on your form, so that you have them separately on the back end.

    In your addFile Javascript, instead of queue.push(reader.result), append a hidden input with the results:

    reader.onloadend = function (e) {
        // ... your code
        // Update the form selector to suit your form
        $('form').append('<input type="hidden" name="files[]" value="' + reader.result + '">');
    };
    

    Then in your ajax form submission:

    $('#upload-ButtonUpload').click(function () {
    
        // Again update the form selector to suit your form
        var data = $('form').serialize();
    
        $.ajax({
            url: "/admin/upload",
            type: "POST",
            data: data,
            // ... etc
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 powerbuilder中的datawindow数据整合到新的DataWindow
  • ¥20 有人知道这种图怎么画吗?
  • ¥15 pyqt6如何引用qrc文件加载里面的的资源
  • ¥15 安卓JNI项目使用lua上的问题
  • ¥20 RL+GNN解决人员排班问题时梯度消失
  • ¥15 使用LM2596制作降压电路,一个能运行,一个不能
  • ¥60 要数控稳压电源测试数据
  • ¥15 能帮我写下这个编程吗
  • ¥15 ikuai客户端l2tp协议链接报终止15信号和无法将p.p.p6转换为我的l2tp线路
  • ¥15 phython读取excel表格报错 ^7个 SyntaxError: invalid syntax 语句报错