在 null laravel 上調用成員函數 getClientOriginalName() 並使用 jquery

Question

我已經搜索了這個問題，但仍然對我不起作用，我想使用 laravel 和 jquery 將我的圖像插入數據庫，但是當我嘗試我的代碼時出錯，我搜索我的問題仍然沒有有任何線索，我的代碼仍然出錯，有人可以幫助我解決問題嗎？ 這是我第一次使用 jquery 將圖像插入到 laravel 中的數據庫中。

這是查看代碼：

<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"

我不知道它是否可以存儲數據庫，但這解決了我從控制器檢查圖像名稱的問題