無法在本地存儲和數據庫中上傳和存儲圖像 (Php Laravel)

Question

所以我正在建立自己的網站，並且我有這個功能，登錄用戶可以上傳和更改他的頭像。 這是我第一次這樣做，所以我很難完成這項工作。 我將提供下面的代碼，你們可能會看到我不知道的錯誤。 如果您能提供有助於我改進的鏈接，將不勝感激。 提前致謝！

Blade.php文件

<form method='POST' action="{{ route('image-upload')  }}" enctype="multipart/form-data">
   @csrf
     <div class=" overflow-auto" style="padding-top:5%">>
      <div class="p-3">
       <div class="card">
        <div class="card-body" >
          <h4 class="card-title text-info"><strong> Attach your picture </strong></h4>
            <div class="row justify-content-center">
              <div class="col-sm-12 col-lg-4">
               <div class="form-group row">
               <label for="step5_picture" class="col-sm-3 text-right control-label col-form-label">Please upload your photo here:</label>
               <div class="col-sm-9">
               <input class="form-control" type="file" value="" id='upload_picture'  >
             </div>
            </div>
           </div>
          </div>
                
       <a href="/home"  class="btn btn-lg waves-effect waves-light btn-success" id="btn-next"  style="float:right;">Next</a>
      <button class="btn btn-lg waves-effect waves-light btn-info" id="btn-upload"  style="float:right; margin-right:10px;">Upload</button>
                </div>
            </div>
        </div>
    </div>
    </form>

阿賈克斯代碼

$("#btn-upload").click(function(e){
    e.preventDefault();
    var data = {
        'photo_filename': $('#upload_picture').val(),
        }

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

  
    $.ajax({
        type: "POST",
        url: "/image-upload",
        data: data,
        dataType: "json",
        success: function (response) { 
        }
        }); 
   });

});

controller.php文件我的數據庫中的列名也是photo_filename

    public function image-upload(Request $request,){
    $data = UserInfoModel::where('app_id', '=' ,Session::get('loginId'))->first();
    $validator=Validator::make($request->all(), [
        'photo_filename' => 'required',
        'photo_filename.*' => 'image|mimes:jpeg,png,jpg,svg|max:5000'
        ]);
        if($request->hasfile('photo_filename')){
            $data->update([
            'photo_filename' => $request->input('photo_filename')
          ]);
            $photo = $request->file('photo_filename')->getClientOrginalName();
            $destination = public_path() . '/public/image';
            $request->file('photo_filename')->move($destination, $photo);
            return back()->with('success', 'Your image has been successfully uploaded!');
        }   
}

Web.php 文件

Route::post('/image-upload',[CustomAuthController::class, 'image-upload'])->name('image-upload');

我得到了一個有效載荷，就在這里

沒有錯誤，但仍然無法上傳

Answer 1

使用FormData在表單中發送文件，並添加contentType: false和processData: false ，你可以在這里閱讀函數設置contentType和processData https://api.jquery.com/jquery.ajax/

var formData = new FormData();
formData.append('photo_filename', $('#upload_picture')[0].files[0])
$.ajax({
  url: "/image-upload",
  type: "post",
  data: formData,
  dataType: 'json',
  contentType: false,
  processData: false,
  success: function(response) {
      
  }
});

Answer 2

這是在 Laravel 中創建文件上傳的最小工作示例：

刀片文件：

<form method="POST" enctype="multipart/form-data" action="{{ route('save') }}">
    @csrf
    <input type="file" name="image" placeholder="Choose image" id="image">
    <button>Send</button>
</form>

控制器：

public function save(Request $request) {
    $path = $request->file('image')->store('public/images');
    return $path;
}

網站.php:

Route::post('/foobar', [\App\Http\Controllers\FoobarController::class, 'save'])->name('save');

請注意這里不需要 Ajax 調用，因為 html 表單將使用 CSRF 令牌進行 POST 調用。

另請注意，在函數名稱中使用連字符在 php 中不起作用。