在null laravel上使用jquery调用成员函数getClientOriginalName()

Question

我已经搜索了这个问题，但仍然不适用于我，我想使用laravel和jquery将我的图像插入数据库，但当我尝试我的代码是错误的，我搜索我的问题仍然没有任何线索，我的代码仍然是错误的时，有人可以帮助我停止我的问题吗？这是我第一次在laravel中使用jquery将图像插入数据库。

这是查看代码：

<form name="formPayment" action="javascript:;" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="row form-group">
<div class="col-sm-12">
<label>Select Image</label>
<input type="file" name="show-image" class="form-control-file" id="showImg">
<div class="image-container">
<img id="proof_image" src="#" alt="Proof Image">                                        
</div>
<div class="text-danger" id="error_show_img"></div>
</div>
</div>
</form>

jquery代码：

$("#btnPay").on("click", function () {
var nameImg = $("input[type=file]").val();
$.ajax({
url: `my-url/insert-image`,
type: "POST",
dataType: {
fieldImg: nameImg
},
success: function (success) {
console.log(success)
}
});
});

控制器：

public function insertImage(Request $request) {
// get image request input
$image = $payment->file('fieldImg');
$name_image = $image->getClientOriginalName();
$image->move(public_path().'/image/proof', $name_image);
return response()->json([
'a' => $name_image
]);
}

当我运行时，输出错误如下：

message: "Call to a member function getClientOriginalName() on null"

我的代码遗漏了什么？如何修复我的代码？谢谢

Answer 1

您需要通过ajax 发送文件

您可以通过new FormData()进行

$("#btnPay").on("click", function () {
var formData = new FormData()
var image = $("input[type=file]")[0].files[0];
formData.append('fieldImg', image);
$.ajax({
url: `my-url/insert-image`,
type: "POST",
data: formData,
success: function (success) {
console.log(success)
}
});
});

现在你可以像一样

$image = $payment->file('fieldImg');
$name_image = $image->getClientOriginalName();

Answer 2

我在jquery中添加了这段代码，它的工作是：

$("#btnPay").on("click", function () {
var formData = new FormData()
var image = $("input[type=file]")[0].files[0];
formData.append('fieldImg', image);
$.ajax({
url: `my-url/insert-image`,
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function (success) {
console.log(success)
}
});
});

结果是：

a: "36587e2603892d0923fc577ba1f9b96f.jpg"

我不知道它是否可以存储在数据库中，但这解决了我从控制器检查图像名称的问题