Php 如何在laravel中使用ajax上传图像

我试图在Laravel中使用ajax上传图像，但当我上传图像时，我收到一条消息

调用null上的成员函数getClientOriginalExtension（）。我不知道我的代码是否有问题。救命啊

ProductController

这是我尝试发送图像的地方

公共函数存储（请求$Request）
{
$validator=validator:：make（$request->input（），数组(
“名称”=>“必需”，
“类别id”=>“必需”，
“说明”=>“必需”，
'price_neto'=>'required'，
“iva”=>“必需”，
“价格总计”=>“必需”，
“图像”=>“所需图像”，
));
$productImage=$request->file（'image'）；
$productImageName=time（）。$productImage->getClientOriginalExtension（）；
$productImage->move（公共路径（“img/products”），$productImageName）；
如果（$validator->fails（））{
返回响应（）->json([
“错误”=>true，
'messages'=>$validator->errors（），
], 422);
}
$products=Product:：create（$request->all（））；
返回响应（）->json([
'error'=>false，
“产品”=>$products，
], 200);
}

Product.js

这是我的Product.js文件。它工作正常，但现在我需要将图像添加到产品中

$（文档）.ready（函数（）{
$（“#btn添加”）。单击（函数（）{
$.ajaxSetup({
标题：{
'X-CSRF-TOKEN'：$（'meta[name=“CSRF-TOKEN”]）.attr（'content'））
}
});
$.ajax({
键入：“POST”，
url:“/产品”，
数据：{
名称：$（“#frmAddProduct input[name=name]”）。val（），
类别id:$（“#frmAddProduct select[name=category_id]”）。val（），
说明：$（“#frmAddProduct input[name=description]”）。val（），
price_neto:$（“#frmAddProduct input[name=price_neto]”）。val（），
iva:$（“#frmAddProduct input[name=iva]”）。val（），
价格总额：$（“#frmAddProduct input[name=price_total]”）。val（），
图像：$（“#frmAddProduct input[name=image]”）。val（），
},
数据类型：“json”，
成功：功能（数据）{
$（'frmAddProduct'）。触发器（“重置”）；
$（“#frmAddProduct.close”）。单击（）；
window.location.reload（）；
},
错误：函数（数据）{
var errors=$.parseJSON（data.responseText）；
$（“#添加产品错误”）.html（“”）；
$.each（错误、消息、函数（键、值）{
$（“#添加产品错误”）.append（“
”+value+”
）；
});
$（“#添加错误包”）.show（）；
}
});
});
});
函数addProductForm（）{
$（文档）.ready（函数（）{
$（“#添加错误包”）.hide（）；
$（'#addProductModal'）.modal（'show'）；
});
}

Product.blade.php


新的
产品
&时代；

{{--另一个代码--}}
图像
添加
接近
不能通过获取元素的值通过ajax传递图像。此外，使用FormData对象通过ajax将文件发送到服务器也很方便，而且是首选

因此，请尝试以下方法：

// Select the image holding element.
var productImage = document.querySelector('#frmAddProduct input[name=image]');

// Creating an instance of FormData to submit the form.
var formData = new FormData();
formData.append('name', $("#frmAddProduct input[name=name]").val());
formData.append('category_id', $("#frmAddProduct select[name=category_id]").val());
formData.append('description', $("#frmAddProduct input[name=description]").val());
formData.append('price_neto', $("#frmAddProduct input[name=price_neto]").val());
formData.append('iva', $("#frmAddProduct input[name=iva]").val());
formData.append('price_total', $("#frmAddProduct input[name=price_total]").val());
formData.append('image', productImage.files[0]);

$.ajax({
    type: 'POST',
    url: '/product',
    data: formData,
    processData: false,
    contentType: false,
    dataType: 'json',
    success: function(data) {
        $('#frmAddProduct').trigger("reset");
        $("#frmAddProduct .close").click();
        window.location.reload();

    },
    error: function(data) {
        var errors = $.parseJSON(data.responseText);
        $('#add-product-errors').html('');
        $.each(errors.messages, function(key, value) {
            $('#add-product-errors').append('<li>' + value + '</li>');
        });
        $("#add-error-bag").show();
    }
});

//选择图像保持元素。
var productImage=document.querySelector（“#frmAddProduct input[name=image]”）；
//创建FormData实例以提交表单。
var formData=new formData（）；
formData.append（'name'，$（“#frmAddProduct input[name=name]”）val（）；
formData.append（'category_id'，$（“#frmAddProduct select[name=category_id]”）val（）；
formData.append（'description'，$（“#frmAddProduct input[name=description]”）val（）；
formData.append（'price#neto'，$（“#frmAddProduct input[name=price#neto]”）val（））；
formData.append（'iva'，$（“#frmAddProduct input[name=iva]”）val（）；
formData.append（'price_total'，$（“#frmAddProduct input[name=price_total]”）val（））；
formData.append（'image'，productImage.files[0]）；
$.ajax({
键入：“POST”，
url:“/产品”，
数据：formData，
processData:false，
contentType:false，
数据类型：“json”，
成功：功能（数据）{
$（'frmAddProduct'）。触发器（“重置”）；
$（“#frmAddProduct.close”）。单击（）；
window.location.reload（）；
},
错误：函数（数据）{
var errors=$.parseJSON（data.responseText）；
$（“#添加产品错误”）.html（“”）；
$.each（错误、消息、函数（键、值）{
$（“#添加产品错误”）.append（“
”+value+”
）；
});
$（“#添加错误包”）.show（）；
}
});
您需要使用
FormData
：

$("#btn-add").click(function(){
    var formData = new FormData($("#frmAddProduct")[0]);
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type: 'POST',
        url: '/product',
        data: formData,
        dataType: 'json',
        success: function(data) {
            $('#frmAddProduct').trigger("reset");
            $("#frmAddProduct .close").click();
            window.location.reload();
        },
        error: function(data) {
            var errors = $.parseJSON(data.responseText);
            $('#add-product-errors').html('');
            $.each(errors.messages, function(key, value) {
                $('#add-product-errors').append('<li>' + value + '</li>');
            });
            $("#add-error-bag").show();
        }
    });
});

$（“#btn添加”）。单击（函数（）{
var formData=新formData（$（“#frmAddProduct”）[0]）；
$.ajaxSetup({
标题：{
'X-CSRF-TOKEN'：$（'meta[name=“CSRF-TOKEN”]）.attr（'content'））
}
});
$.ajax({
键入：“POST”，
url:“/产品”，
数据：formData，
数据类型：“json”，
成功：功能（数据）{
$（'frmAddProduct'）。触发器（“重置”）；
$（“#frmAddProduct.close”）。单击（）；