Laravel-Manager无法添加图片路径问题求助

问题描述 #

集成Laravel File Manager后，选择图片并确认操作完成，输入框内始终未显示图片路径。相关配置与代码如下：

路由配置（web.php） #

Route::group(['prefix' => 'laravel-filemanager', 'middleware' => []], function () {
    \UniSharp\LaravelFilemanager\Lfm::routes();
}); 

文件系统配置（config/filesystems.php） #

'public' => [
    'driver' => 'local',
    'root' => storage_path('app/public'),
    // 'url' => env('APP_URL').'/storage',
    'url' => '/storage',
    'visibility' => 'public',
    'throw' => false,
],

注：设置env('APP_URL').'/storage'时，图片路径不正确，无法在Laravel File Manager中正常查看。

Blade模板代码（create.blade.php） #

<div class="form-group">
  <label for="thumbnail" class="form-label">Image<span class="text-danger">*</span></label>
     <div class="input-group">
       <div class="input-group-prepend">
          <button type="button" id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-alt-primary">Choose</button>
       </div>
       <input type="text" class="form-control" id="thumbnail" name="ration_image" required>
       @error('ration_image')
          <p class="text-danger">{{ $message }}</p>
       @enderror
     </div>
      <img id="holder" style="margin-top:15px;max-height:100px;" src="{{ old('ration_image') }}" alt="Selected Image">
</div>

前端脚本 #

<script src="/vendor/laravel-filemanager/js/stand-alone-button.js"></script>
<script src="{{ asset('/js/plugins/jquery-ui-1.13.2/jquery-ui.min.js') }}"></script>
<script>
        var route_prefix = "/laravel-filemanager?editor=file";
        $('#lfm').filemanager('image', {
            prefix: route_prefix,
            onSuccess: function(data) {
                $('#thumbnail').val(data.url);
            }
        });
</script>

已尝试的配置修改（config/lfm.php） #

'dir' => 'public/uploads/images', 
'url_prefix' =>'storage/uploads/images',
'should_create_thumbnails' => false,

排查与解决步骤 #

1. 修复路由中间件配置 #

Laravel File Manager依赖web中间件处理会话等基础逻辑，空中间件组会导致功能异常。修改路由配置：

Route::group(['prefix' => 'laravel-filemanager', 'middleware' => ['web']], function () {
    \UniSharp\LaravelFilemanager\Lfm::routes();
}); 

2. 修正文件系统URL与存储链接 #

将config/filesystems.php的public磁盘配置改回默认，同时生成存储软链接：

'public' => [
    'driver' => 'local',
    'root' => storage_path('app/public'),
    'url' => env('APP_URL').'/storage',
    'visibility' => 'public',
    'throw' => false,
],

执行命令生成软链接：

php artisan storage:link

本地开发时确保APP_URL配置正确（如http://localhost:8000），保证生成的图片路径可正常访问。

3. 调整前端脚本路由前缀 #

独立按钮模式不需要?editor=file参数，同时可简化onSuccess逻辑（组件内置填充输入框功能）：

var route_prefix = "/laravel-filemanager";
$('#lfm').filemanager('image', {prefix: route_prefix});

4. 更新config/lfm.php目录配置 #

dir参数已被弃用，改用root_folder_name指定存储目录，确保与文件系统配置一致：

'disks' => [
    'public' => [
        'driver' => 'local',
        'root'   => storage_path('app/public'),
        'url'    => env('APP_URL').'/storage',
        'visibility' => 'public',
    ],
],
'root_folder_name' => 'uploads/images',
'url_prefix' => '/storage/uploads/images',

5. 清除缓存 #

执行命令刷新配置与路由缓存：

php artisan config:clear
php artisan route:clear

6. 检查浏览器控制台错误 #

打开浏览器开发者工具（F12），查看是否存在JS加载失败、依赖缺失等报错，确保jQuery在stand-alone-button.js之前加载（Laravel File Manager依赖jQuery）。

内容的提问来源于stack exchange，提问作者Hoàng Hải Lý