使用 jQuery AJAX 在 Laravel 中上传图片

Question

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

Answer 1

您上传的文件显然不符合验证规则。您在代码中遇到的另一个问题是在传递photo 时尝试保存image 的行。以下代码来自laravel doc for storing files

$validator = \Validator::make($request->all(), [
    'photo' => 'required|file|mimes:jpeg,png,jpg,gif,svg',
]);
if ($files = $request->file('photo')) {
    //insert new file
    $destinationPath = 'public/product_images/'; // upload path
    $image_path = $request->file('photo')->store($destinationPath);
}