Laravel - Ajaxからのデータの取得リクエスト

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

私の応答はちょうど1項目の配列内の1つの長いbase64であるので、一種の、動作します。複数のイメージを追加したとしても、3つではなく1つのアイテムが配列に追加されます。今ではそれらをすべて1つに結合します。また、私が言ったように。私はその配列で500エラーにならない何もできません。

だから私の質問は次のとおりです。

は、どのように私はそれは私が代わりに1の複数のアイテムを投稿し、バックエンドのデータを取得することができます仕事を得るのですか？

Answer 1

各ファイルをフォームの新しい入力として追加して、バックエンドに個別に追加することができます。あなたのaddFile JavaScriptで

、代わりのqueue.push(reader.result)、結果に隠し入力を追加します。

あなたのAjaxのフォーム送信で次に

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

：

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