使用jQuery AJAX在Laravel中上载图像

我正在尝试使用jQueryAjax在Laravel中上传照片。但它总是多次失败，并显示错误消息

照片必须是图像。 照片必须是以下类型的文件：jpeg、png、jpg、gif、SVG

我不知道为什么。我下面的代码有什么问题

控制器

$validator = \Validator::make($request->all(), [
    'photo' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
    
if ($files = $request->file('image')) {
    //---Insert new file
    $destinationPath = 'public/product_images/'; // upload path
    $image_path = date('YmdHis') . "." . $files->getClientOriginalExtension();
    $files->move($destinationPath, $image_path);
}

$productId = DB::table('products')->insertGetId([
    'product_photo' => $image_path
]);

查看

$("#photo").fileinput({
    theme: 'fa',
    uploadUrl: '{{ route('products.store') }}',
    uploadExtraData: function() {
        return {
            _token: $("input[name='_token']").val(),
        };
    },
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    overwriteInitial: false,
    maxFileSize: 2000,
    maxFilesNum: 5,
    slugCallback: function(filename) {
        return filename.replace('(', '_').replace(']', '_');
    }
});
                        
$('#saveBtnForCreate').click(function(e) {
    e.preventDefault();
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        url: "{{ route('products.store') }}",
        method: 'post',
        enctype: 'multipart/form-data',
        cache: false,
        dataType: 'JSON',
        data: {
            photo: $('#photo').val()
        },
        success: function(result) {
            if (result.errors) {
                $('.alert-danger').html('An error in your input!');
                $.each(result.errors, function(key, value) {
                    $('.alert-danger').show();
                    $('.alert-danger').append('<strong><li>' + value + '</li></strong>');
                });
            } 
        }
    });
});

$（“#照片”）.fileinput({
主题:"fa",，
上传URL:“{route（'products.store'）}}”，
uploadExtraData:函数（）{
返回{
_令牌：$（“输入[名称=''U令牌]”）.val（），
};
},
允许的文件扩展名：['jpg'，'png'，'gif']，
覆盖初始值：false，
最大文件大小：2000，
maxFilesNum:5，
slugCallback:函数（文件名）{
返回文件名.replace（'（'，'.''.'）。replace（']'，'.'）；
}
});
$（'#saveBtnForCreate'）。单击（函数（e）{
e、 预防默认值（）；
$.ajaxSetup({
标题：{
'X-CSRF-TOKEN'：$（'meta[name=“CSRF-TOKEN”]）.attr（'content'））
}
});
$.ajax({
url:“{route（'products.store'）}}”，
方法：“post”，
enctype:“多部分/表单数据”，
cache:false，
数据类型：“JSON”，
数据：{
照片：$（'照片'）.val（）
},
成功：功能（结果）{
if（result.errors）{
$（'.alert danger'）.html（'输入中有错误！'）；
$.each（result.errors、函数（键、值）{
$（'.alert danger'）.show（）；
$（'.alert danger'）。追加（'
'+value+''）；
});
} 
}
});
});

显然，您上传的文件不符合验证规则。代码中的另一个问题是，当您传递

照片时，您试图保存
图像
的行“``。下面的代码来自

您需要使用
formData
添加一些参数来追加文件。试试这个

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

        var formData = new FormData();

        formData.append('photo', $('#photo')[0].files[0]);
        formData.append('name', $("input[name='name']").val());
        formData.append('code', $('#code').val());
        formData.append('categories', $('#categories').val());
        formData.append('stok', $('#stok').val());

        $.ajax({
            url: "{{ route('products.store') }}",
            method: 'post',
            enctype: 'multipart/form-data',
            cache: false,
            data: formData,
            dataType: 'JSON',
            headers: {
                'Content-Type': undefined,
            },
            xhr: function() {
                myXhr = $.ajaxSettings.xhr();
                return myXhr;
            },
            contentType: false,
            processData: false,
            async: false,
            success: function(result) {
                if (result.errors) {
                    $('.alert-danger').html(
                        'An error in your input!'
                    );
                    $.each(result.errors, function(key, value) {
                        $('.alert-danger').show();
                        $('.alert-danger').append('<strong><li>' + value +
                            '</li></strong>');
                    });
                } else {
                    $('.alert-danger').hide();
                    $('.alert-success').show();
                    $('.datatable').DataTable().ajax.reload();
                    setInterval(function() {
                        $('.alert-success').hide();
                        location.reload();
                    }, 2000);
                }
            }
        });
    });

formData
怎么样？仍然不起作用。@jquery部分的SeadLab参考我不知道在这种情况下如何实现
formData
。你能给我写一个更具体的代码吗？
$('#saveBtnForCreate').click(function(e) {
        e.preventDefault();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var formData = new FormData();

        formData.append('photo', $('#photo')[0].files[0]);
        formData.append('name', $("input[name='name']").val());
        formData.append('code', $('#code').val());
        formData.append('categories', $('#categories').val());
        formData.append('stok', $('#stok').val());

        $.ajax({
            url: "{{ route('products.store') }}",
            method: 'post',
            enctype: 'multipart/form-data',
            cache: false,
            data: formData,
            dataType: 'JSON',
            headers: {
                'Content-Type': undefined,
            },
            xhr: function() {
                myXhr = $.ajaxSettings.xhr();
                return myXhr;
            },
            contentType: false,
            processData: false,
            async: false,
            success: function(result) {
                if (result.errors) {
                    $('.alert-danger').html(
                        'An error in your input!'
                    );
                    $.each(result.errors, function(key, value) {
                        $('.alert-danger').show();
                        $('.alert-danger').append('<strong><li>' + value +
                            '</li></strong>');
                    });
                } else {
                    $('.alert-danger').hide();
                    $('.alert-success').show();
                    $('.datatable').DataTable().ajax.reload();
                    setInterval(function() {
                        $('.alert-success').hide();
                        location.reload();
                    }, 2000);
                }
            }
        });
    });

if ($request->file('photo')) {
            //insert new file
            $destinationPath = 'public/product_images/'; // upload path
            $image_path = $request->file('photo')->store($destinationPath);
        }

        $productId = DB::table('products')->insertGetId(
            [
                'product_photo' => $image_path
            ]
        );