Laravel 使用 Ajax 上传文件答案

【问题标题】：Laravel upload file using AjaxLaravel 使用 Ajax 上传文件
【发布时间】：2019-07-26 15:51:39
【问题描述】：

我正在尝试使用 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);
}

谢谢

【问题讨论】：

你能显示你用来提交表单的javascript代码吗？
$('#addTask_form').on('submit', function(event){ event.preventDefault(); var form_data = $(this).serialize(); $.ajax({ url:"{{route('postdataroute')}}", method:"POST", data:form_data, dataType:"json", success:function(data) { if (data.error.length > 0) ..................
请在您的问题中添加您的javascript代码

标签： jquery ajax laravel file-upload nullable

【解决方案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')
        }
    });

【讨论】：

【解决方案2】：

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

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

【讨论】：