Laravel 5.4 无法解析使用 Jquery Ajax 发送的 FormData javascript 对象

问题描述 投票：0回答：6

最近我一直在尝试解决一个没有运气的问题，基本上我正在尝试使用 AJAX 向服务器提交一个表单，该表单有文件，所以我在 JQuery 1.12 中使用 

FormData
javascript 对象。数据到达服务器，但我不知道如何格式化它。

这是我的 AJAX 功能：

function saveMenu(id){
    var formElement = document.getElementById("menu-form");
    var formData = new FormData(formElement);
    formData.append('_method', 'PUT');
    $( "#form-wrapper" ).toggleClass( "be-loading-active" );
    $.ajax({
        type: 'PUT',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: "{{url('myUrl')}}",
        data: formData,
        enctype: 'multipart/form-data',
        processData: false,
        success: function(response) {
            toastr.success('Yai! Saved successfully!')
        },
        error: function(response) {
            toastr.error('Oh oh! Something went really wrong!')
        },
        complete: function() {
            $( "#form-wrapper" ).toggleClass( "be-loading-active" )
        }
    });
}

当我在我的控制器中执行

dd($request->all());
时，我得到这样的东西：

array:1 [
  "------WebKitFormBoundaryRCIAg1VylATQGx46\r\nContent-Disposition:_form-data;_name" => """
    "_token"\r\n
    \r\n
    jtv4bnn8WQnP3eqmKZV3xWka2YOpnNc1pgrIfk0D\r\n
    ------WebKitFormBoundaryRCIAg1VylATQGx46\r\n
    Content-Disposition: form-data; name="blocks[43][title]"\r\n
    \r\n
...

我尝试过的事情：

  • 将 HTTP 谓词设置为 POST。同样的结果。
  • 设置 AJAX 
    contentType: false
    , 
    contentType: application/json
    。空响应。
  • 删除
    enctype: 'multipart/form-data'
    。同样的回应。

任何帮助表示赞赏。

ajax laravel http laravel-5.4 form-data
6个回答
3
投票

这帮我解决了

data: form_data,
contentType: false,
processData: false,


processData: false
防止 jQuery 解析数据并抛出非法调用错误。 JQuery 在遇到表单中的文件无法将其转换为字符串（序列化）时执行此操作。

contentType: false
防止 ajax 发送内容类型标头。内容类型标头使 Laravel 将 FormData 对象处理为一些序列化字符串。

将两者都设置为 false 使它对我有用。 我希望这会有所帮助。

$('#my-form').submit(function(e) {
        e.preventDefault();
        var api_token = $('meta[name="api-token"]').attr('content');
        form_data = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '/api/v1/item/add',
            headers: {
                Authorization: 'Bearer ' + api_token
            },
            data: form_data,
            contentType: false,
            processData: false,
            success: function(result,status,xhr) {
                console.log(result);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    });

还记得使用

$request->all();
$request->input()
排除文件

1
投票

我一直在尝试调试它 2 个小时，我发现 PUT 方法无法正确处理 formData。

尝试改变

type : "PUT"

进入

method : "POST"

然后将后端的方法从 

put
更改为 
post
，您会看到不同之处。 我用下面的代码来测试它

$("#menu-form").submit(function (){
    var fd = new FormData();
    fd.append('section', 'general');
    fd.append('action', 'previewImg');
    fd.append('new_image', $('.new_image')[0].files[0]); 
    $.ajax({
        method : 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token()}}'
        },
        url: "{{url('upload-now')}}",
        data : fd,
        contentType: false,
        processData: false,
        success: function(response) {
            console.log(response);
        },
    });
    return false;
});

在我的控制器中

public function test(Request $request){
    dd($request->all());
}

我会尝试更多地研究这个问题。

1
投票

拉维尔 7， 如果在 ajax 中使用 PUT 方法，你可以按照 1.把方法

method: 'PUT'
改成
method: 'POST'
2. 添加 formdata.append 和 _method PUT 就像这个例子：

$('#updateBtn').click(function(e){
    e.preventDefault();
    var frm = $('#tambahForm');
    frm.trigger("reset");
    $('.edit_errorNama_kategori').hide();
    $('.edit_errorGambar').hide();
    var url = "/pengurus/category/"+$('#edit_id').val();
    var formdata = new FormData($("#editForm")[0]);
    formdata.append('_method', 'PUT');  //*** here

    $.ajax({                       
        method :'POST', //*** here
        url : url,
        data : formdata,
        dataType : 'json',
        processData: false,
        contentType: false,
        success:function(data){
          if (data.errors) {
            if (data.errors.nama_kategori) {
                $('.edit_errorNama_kategori').show();
                $('.edit_errorNama_kategori').text(data.errors.nama_kategori);
            }
            if (data.errors.gambar){
              $('.edit_errorGambar').show();
              $('.edit_errorGambar').text(data.errors.gambar);
            }
          }else {
            frm.trigger('reset');
            $('#editModal').modal('hide');
            swal('Success!','Data Updated Successfully','success');
            table.ajax.reload(null,false);
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
          alert('Please Reload to read Ajax');
          console.log("ERROR : ", e);
        }
    });
});

对我有用

0
投票

最后我放弃了尝试让它工作并尝试了更普通的方法，我仍然不知道为什么请求是这样格式化的原因，但是

XMLHttpRequest()
功能完美运行并且迁移不是什么大问题。

我发布的功能相当于：

function saveMenu(action){
    var formElement = document.getElementById("menu-form");
    var formData = new FormData(formElement);
    formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

    var request = new XMLHttpRequest();
    request.open("POST", "{{url('myUrl')}}");
    request.send(formData);

    request.onload = function(oEvent) {
      if (request.status == 200) {
        toastr.success('Yai! Saved successfully!');
      } else {
        toastr.error('Oh oh! Something went really wrong!');
      }
      $( "#form-wrapper" ).toggleClass( "be-loading-active" );
    };
}
0
投票

有点晚了，但是； 这将解决您的问题；

var formData = new FormData(document.getElementById('form'));
console.log(...formData);

var object = {};
formData.forEach(function (value, key) {
    object[key] = value;
});

然后就可以把这个

object
发给服务器了。这更具可读性并且效果很好。

或

您可以直接发送这个；

JSON.stringify(Object.fromEntries(formData));

这是较新的方法。 不要放弃 :-)

0
投票

如果您收到这样的回复

Array ( [------WebKitFormBoundaryZHCPkXfouoiFpLDg Content-Disposition:_form-data;_name] => "mencommentid" 43 ------WebKitFormBoundaryZHCPkXfouoiFpLDg Content-Disposition: form-data; name="mmencommentid" 39 ------WebKitFormBoundaryZHCPkXfouoiFpLDg Content-Disposition: form-data; name="replymencomment" asd ------WebKitFormBoundaryZHCPkXfouoiFpLDg Content-Disposition: form-data; name="video" ------WebKitFormBoundaryZHCPkXfouoiFpLDg Content-Disposition: form-data; name="file"; filename="" Content-Type: application/octet-stream ------WebKitFormBoundaryZHCPkXfouoiFpLDg Content-Disposition: form-data; name="audio"; filename="" Content-Type: application/octet-stream ------WebKitFormBoundaryZHCPkXfouoiFpLDg-- )

然后

cache: false,
processData: false,
contentType: false,

添加这些内部请求对我有帮助

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.