Question

我正在尝试使用Ajax请求在Laravel 5.7中创建上传功能。编写此代码后，数据库中出现空值。因此，除了返回空值的文件外，所有其他数据都将被插入。

tasks.blade.php

<form method="post" id="addTask_form" name="addtask" enctype="multipart/form-data">
      .......................
            <div class="form-group">
                <label>File</label>
                 <input type="file" name="file" id="file">
            </div>
            .............


        </div>                 

      <div class="modal-footer">
       ................
      </div>
      </form>

TasksController.php

 function postdata(Request $request)
{
    $validation = Validator::make($request->all(), [
        .......
        'file' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',    
        'status' => 'required',

        ]);

   .............
    if ($validation->fails())
    {
        foreach ($validation->messages()->getMessages() as $field_name => $messages)
        {
            ...........
        }
    }
    else
    {
        if($request->get('button_action') == 'insert')
        {


            if($request->hasFile('file') && $request->file('file')->isValid()){
                $file = $request->file('file');
                $file_name = str_random(30) . '.' . $file->getClientOriginalExtension();
                $file->move(base_path() . '/assets/img', $file_name);
            }
            $task = new Task($request->input());

            $task->save();


    }


    $output = array(
        'error'     =>  $error_array,
        'success'   =>  $success_output
    );
    echo json_encode($output);
}

谢谢

Answer 1

您不能使用serialize（）上传图像。您需要使用FormData
与 contentType：false， processData：false，

================================================ ======================

      var data = new FormData($('#addTask_form')[0]);
         $.ajax({
             url: "{{route('postdataroute')}}",
             data: data,
             type: 'POST',
             contentType: false,
             processData: false,
             success: function (data) {

             }      
         }); 


1. if you don't want to send csrf token

then 

app/Http/Middleware/VerifyCsrfToken.php

and add this route's url to the except array

protected $except = [
   'your route url'
];

2. if want 

then add in head 
<meta name="csrf-token" content="{{ csrf_token() }}">

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
in script

Answer 2

您可以使用Ajax上的POST请求使用FormData方法上传文件

$(document).on('submit', '#yourFormId', function(e){
  e.preventDefault();

  var form_data = new FormData($('#yourFormId')[0]); // this method will send the file request and the post data 
  form_data.append("_token","{{csrf_token()}}") //for csrf token
  $.ajax({
      type:'POST',
      url:'{{route('yourRoute')}}',
      async: false,
      cache: false,
      data : form_data,
      success: function(response){

      }
  });
});

基本上async:false将执行ajax请求并停止执行进一步的js代码，直到时间请求完成为止，因为上传文件可能需要一些时间才能上传到服务器。

cache将强制浏览器不缓存上传的数据以在ajax请求中获取更新的数据

在How to upload file using Ajax On Post上引荐

Laravel使用Ajax上传文件

2 个答案: