如何在 laravel 中使用 ajax 上传图片答案

【问题标题】：How to upload image using ajax in laravel如何在 laravel 中使用 ajax 上传图片
【发布时间】：2020-05-11 03:13:26
【问题描述】：

在 laravel 中使用 ajax 上传 img 时遇到问题。我在getClientOriginalExtension() 有错误我认为在 ajax 中 enctype 有问题，因为控制器无法读取上传文件。

这是我的看法：

<form name="data-form" id="data-form" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="file" name="img_thumbnail" class="form-control">
</form>
<script type="text/javascript">
    $(function () {
        $.ajaxSetup({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
       $('body').on('click', '#saveBtn', function(){
            var url;
            var registerForm = $("#data-form");
            var formData = registerForm.serialize();
            $(this).html('saving...');
            $('#saveBtn').attr('disabled',true);

            $.ajax({
                enctype: 'multipart/form-data',
                url: '{{ route('blog.store') }}',
                type:'POST',
                data:formData,
                success:function(data) {
                    console.log(data);
                    if(data.errors) {
                   }
                    if(data.success) {
                    }
                    $('#saveBtn').html('Save Data');
                    $('#saveBtn').attr('disabled',false);
                },
                error: function (data) {
                  console.log('Error:', data);
                  $('#saveBtn').html('Save Data');
              }

            });
        });
 });
    </script>

这是我的控制器

$name_file = time().'.'.$request->img_thumbnail->getClientOriginalExtension();
$request->img_thumbnail->move(public_path('images'), $nama_file);

【问题讨论】：

I have an error - 什么错误？ because the controller can not read the upload file - 你怎么知道，会发生什么？请明确点。 stackoverflow.com/questions/how-to-ask
我不知道，当我在 chrome 中使用调试器 F12 时，错误提示“在 null 上调用成员函数 getClientOriginalExtension()”
您不能仅使用 serialize() 在 AJAX 中上传文件。您需要使用FormData 或其他方法。 SO上有很多重复，here's a good one.
这能回答你的问题吗？ Uploading both data and files in one form using Ajax?

标签： image laravel-5 jquery-file-upload

【解决方案1】：

<form name="data-form" id="data-form" enctype="multipart/form-data">
   {{ csrf_field() }}
   <input type="file" name="img_thumbnail" class="form-control">
</form>

<script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script type="text/javascript">
    $(document).ready( function () {
       $("form#data-form").on("submit",function (e) {
           e.preventDefault();
           var formData = new FormData(this);
           //Ajax functionality here
           $.ajax({
            url : '{{route('blog.store')}}',
            type : "post",
            data : formData,
            dataType : 'json',
            success:function (data) {
                console.log(data);
                if(data.errors) {
               }
                if(data.success) {
                }
                $('#saveBtn').html('Save Data');
                $('#saveBtn').attr('disabled',false);
            }, // success end
            contentType: false,
            processData: false
        }); // ajax end
    }); // form submit end
}); //document end

【讨论】：