Tương tự như thêm ảnh đại điện các bạn thêm tho mình đoạn script Ajax sau vào file Js:

$('#files').on('change',()=>{
    var formData = new FormData()
    var files = $('#files')[0].files
    for (let index = 0; index < files.length; index++) {
        formData.append('files[]',files[index])
    }
    $.ajax({
        url:'/uploads',
        method: 'POST',
        dataType: 'JSON',
        data: formData,
        contentType: false,
        processData: false,
        success:function(result){
            if(result.success = true)
            {
                let url = window.location.hostname
                if(url.includes('minacode.net')) {
                    for (let index = 0; index < result.url.length; index++) {
                        let truePath =  "/public"+result.url[index] ;
                        html =''
                       html+=
                       '<img src="'+truePath+'" alt=""><input type="hidden" value="'+truePath+'" class="product-images" name="product_images[]">'
                       $('#input-file-imgs').html(html)
                    }
                }
                else {
                    html =''
                    for (let index = 0; index < result.url.length; index++) {
                       html+=
                       '<img src="'+result.url[index]+'" alt=""><input type="hidden" value="'+result.url[index]+'" class="product-images" name="product_images[]">'
                       $('#input-file-imgs').html(html)
                   
                    }
                }

            }
        }
    })
})

Trong đoạn code trên mình có sự dụng:

 window.location.hostname 

Mục đích để có thể chuyển qua chuyển lại giữa môi trường local và servel mà không cần thay đổi lại cái path của ảnh. 

Tại sao lại phải như vậy? 

Đó là vì cái đường dẫn public_path của laravel và server khi bạn golive project  sẽ khác nhau. Khúc này mà bạn nào đã từng cho cái project của mình lên hosting sẽ có cái nhìn rõ hơn nhé!

Code giao diện thêm ảnh sản phẩm của mình trong trường hợp này sẽ như sau:

   <div class="input-file">
       <label id="files-label" for="files"><i class="ri-file-image-line"></i>Ảnh Sản Phẩm</label>
       <input type="file" id="files" multiple>
       <div class="input-file-imgs" id="input-file-imgs">
       </div>
     </div>

Bài trước chúng ta đã tạo cho nó một controller có tên là UploadController rồi đúng không. Các bạn thêm cho mình method sau để xử lý việc thêm nhiều ảnh sản phẩm nhé

  public function uploads'(Request $request){
        $files = $request -> file('files');
       for ($i=0; $i < count($files) ; $i++) { 
        $fileName =time().'-'.$files[$i]->getClientOriginalName();
        $files[$i] -> storeAs('/public/images',$fileName);
        $url[] = '/storage/images/'.$fileName;
        
       }
       return response() -> json([
        'success' => true,
        'url' => $url

    ]);
    
    }

Đừng quên tạo cho em nó một route nhé:

Route::post('/uploads',[UploadController::class,'uploads']);

Và đừng quên:

php artisan optimize:clear

OK, bây giờ thì các bạn thử kiểm tra xem nào. Quá ngon lanh rồi đúng không. Hẹn gặp lại các bạn nhé!