表单数据为空 - laravel 5.4

Posted 2023-02-24

【中文标题】表单数据为空 - laravel 5.4

【英文标题】：Formdata is empty - laravel 5.4

【发布时间】：2017-10-18 04:31:34

【问题描述】：

朋友们好， 我正在尝试在 laravel 5.4 中使用 ajax 上传图片

问题： 服务器端的表单数据为空

代码：

查看：

<form role="form" action="route('auth.upload')" method="post" enctype="multipart/form-data" id="form3">
      csrf_field() 
     <h3>Upload Logo</h3>

     <div class="form-group">
          <label class="custom-file upload-image">
          <input type="file" id="image" name="image" class="custom-file-input">
          <span class="custom-file-control"></span>
          </label>
      </div>
      <button type="submit" class="btn btn-upload">Save Image</button>
</form>  

JS：

$('#form3').on('submit',function(e)
    e.preventDefault();

    var url = $(this).attr('action'),
    post = $(this).attr('method'),
    data = new FormData(this);

    $.ajax(
        url: url,
        method: post,
        data: data,
        success: function(data)
            console.log(data);
        ,
        error: function(xhr, status, error)
            alert(xhr.responseText);
        ,
        processData: false,
        contentType: false
    );
);  

路线：

Route::post('home/form3', 'HomeController@store')->name('auth.upload');  

控制器：

public function store(Request $request)
    if ($request->ajax()) 

        return $request->all(); // THIS IS RETURNING EMPTY OBJECT

        if ($request->hasFile('image')) 

            $name = $request->image->getClientOriginalName();
            $request->image->storeAs('public/upload',$name);

            $company = new Company;
            $url = Storage::url($name);
            $company->update(['image'=>$url]);

            return response(['msg'=>'image uploaded']);
        else
            return response(['msg'=>'No file has selected']);
         
    
  

服务器端的返回响应是：

Object _token: "zFKgoBkdjaIswMG5X0fOyVtaGSYMs84iPDtJA4F5", image: Object
   image : Object
   _token : "zFKgoBkdjaIswMG5X0fOyVtaGSYMs84iPDtJA4F5"
   __proto__ : Object  

我只能看到令牌正在返回，但没有上传图像的数据。如果我在不使用 ajax 的情况下提交表单，那么它工作正常。

不使用 ajax 提交时的输出（这是我期望使用 ajax 提交的输出）：

array:2 [▼
  "_token" => "eVEjl9UW4rU69oz1lIIiuNABZVpRJFldDST02Nje"
  "image" => UploadedFile #229 ▼
    -test: false
    -originalName: "empty-normal.png"
    -mimeType: "image/png"
    -size: 85494
    -error: 0
    #hashName: null
    path: "C:\xampp\tmp"
    filename: "php917E.tmp"
    basename: "php917E.tmp"
    pathname: "C:\xampp\tmp\php917E.tmp"
    extension: "tmp"
    realPath: "C:\xampp\tmp\php917E.tmp"
    aTime: 2017-05-18 11:17:11
    mTime: 2017-05-18 11:17:11
    cTime: 2017-05-18 11:17:11
    inode: 0
    size: 85494
    perms: 0100666
    owner: 0
    group: 0
    type: "file"
    writable: true
    readable: true
    executable: false
    file: true
    dir: false
    link: false
    linkTarget: "C:\xampp\tmp\php917E.tmp"

]

谁能帮我解决这个问题？

**提前致谢...

【问题讨论】：

请检查从 FormData 函数返回的数据，将其记录到控制台中，看看它是否在那里记录。

@PandhiBhaumik 感谢您的评论。通过使用控制台日志，我们无法检查表单数据。如果我们这样做，它将返回空对象。这里有更多关于检查 formdata link 的解释。我发现客户端脚本没有错误。

那么，我是客户端的问题？

@PandhiBhaumik 客户端没问题

请使用dd($request->all())查看数据，看看是否可以获取数据。

【参考方案1】：

试试这个，它会帮助你。

$(document).on('submit', 'yourformId', function (event) 
    event.stopPropagation();
    event.preventDefault();
    var data = new FormData($(this)[0]);


    if (xhr && xhr.readyState !== 400 && xhr.status !== 200) 
        xhr.abort();
    

    var xhr = $.ajax(
        url: "urltoUpload",
        method: "POST",
        cache: false,
        data: data,
        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
        processData: false, // NEEDED, DON'T OMIT THIS
        // dataType: 'json',
        statusCode: 
            404: function () 
                alert("status message")
            ,
            500: function () 
                alert("server down");
            
        ,
        beforeSend: function (jqXHR, setting) 
            if (setting.status !== 200) 
                console.log("You can put here")
            
        ,
        error: function (jaXHR, textStatus, errorThrown) 
            // Now it will get parse error because dataType is json and response is html
            // console.log(errorThrown);
        ,
        success: function (data, textStatus, jqXHR) 
            console.log(data);

            if (typeof data.error === 'undefined') 
                // Success so call function to process the form
                console.log('SUCCESS: ' + data.success);
            
            else 
                // Handle errors here
                console.log('ERRORS: ' + data.error);
            
        ,
        complete: function (jqXHE, textStatus) 
            document.body.innerHTML = "dfafsaf";
        

    );
);

在你的控制器中你可以使用

dd($request->all());

你确定！！