Question

我想用ajax上传图片。我将图像转换为base64字符串。发布数据有效，但如何在服务器上获取（我使用Laravel 5.4）？我可以做$request->all()什么给了我一个包含所有图像base64字符串组合的数组。我无法做任何事情，因为无论我对该数组做什么都会导致500错误。

这是我转换图像并发布它们的脚本。

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

});

这是我的控制者：

public function upload(Request $request)
{

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

那是有效的，因为我的响应是只有一个项目的数组中的一个长base64。即使我添加了多个图像，我只得到数组中的一个项而不是三个。它现在将它们全部合二为一。另外，正如我所说。我不能对该数组做任何不会导致500错误的事情。

所以我的问题是：

如何让它工作，以便我可以发布多个项目而不是一个项目并在后端获取数据？

Answer 1

您可以将每个文件添加为表单上的新输入，以便在后端单独添加它们。

在addFile Javascript中，而不是queue.push(reader.result)，添加隐藏的输入结果：

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

然后在你的ajax表单提交中：

$('#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

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

1 个答案: