2017-09-02 57 views
0

我想用ajax上传图片。我将图像转换为base64字符串。发布数据的作品,但我如何得到它在服务器上(我使用Laravel 5.4)?我可以做$request->all()什么给我一个阵列与所有的图像base64字符串相结合。我无法做任何事情,因为无论我如何处理该数组都会导致500错误。Laravel - 从Ajax获取数据发布请求

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

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

这样的作品,那种,因为我的回答是只有1个项目的数组一个长的base64。即使我添加多个图像,我只是在数组中获得一个项目而不是三个。它现在将它们合并为一个。另外,正如我所说的。我无法对该数组做任何事情,但不会导致500错误。

所以我的问题是:

我如何得到它的工作,所以我可以发布,而不是一个多个项目,并获得与后端的数据?

+0

可以共享'$请求 - >所有()'输出? –

+0

请分享从html输入的文件行吗? –

回答

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