Laravel 使用 Ajax 上传文件

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) {

        }      
    });

如果您不想发送 csrf 令牌

然后

    app/Http/Middleware/VerifyCsrfToken.php

并将此路由的 url 添加到 except 数组

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

如果需要

然后在头部添加

    <meta name="csrf-token" content="{{ csrf_token() }}">

并在脚本中

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

Answer 2

您可以使用 FormData 方法在 POST

上使用 Ajax 请求上传文件

$(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 请求中获取更新的数据

上的推荐人

Laravel 使用 Ajax 上传文件

Laravel upload file using Ajax

ajax

jquery

nullable

file-upload

laravel