Laravel Livewire本地机器临时预览URL无法正常工作

问题现象 #

使用Laravel Livewire的Livewire\WithFileUploads功能实现文件上传，参照官方文档实现待上传图片预览，按步骤操作后预览无法正常显示：

• 预览区域显示破损图片图标
• 元素审查获取到的预览地址如下：

http://192.168.1.33:8000/livewire/preview-file/tmRlboRMpPEv3MMOiX5iu6vPph0PLC-metacHJvZmlsZXBpYy5qcGc=-.jpg?expires=1654720661&signature=e0d825c78ae9bcbc8123b72a542ba827d984810aa32dee8527e63e0c9babf27a

• 直接访问上述地址，页面返回中心带灰色方块的黑屏，无正常图片内容
• 尝试过公开社区给出的同类问题解决方案，未生效

相关代码与环境 #

Livewire组件控制器代码 #

use Livewire\Component;
use Livewire\WithFileUploads;

class CenterRegistration extends Component
{
    use WithFileUploads;

    public $logo;

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

    public function render()
    {
        return view('livewire.logo-uploader');
    }

    public function submit()
    {
        $this->validate();
    }

    protected function rules()
    {
        return [
            'logo' => [
                'required',
                'mimes:png,jpg',
                'max:2048',
            ],
        ];
    }
}

Livewire Blade模板代码 #

<form wire:submit.prevent="submit">
<div class="input-group shadow-sm">
    <div class="input-group-prepend input-group-text bg-light rounded-5">
        {{ Form::label('logo','Logo',[
            'for' => 'logo',
            'class' => 'rounded-0 required',
        ]) }}
    </div>
    {{ Form::file('logo',[
        'id' => 'logo',
        'class' => "form-control rounded-5",
        'accept' => 'image/*',
        'required',
        'wire:model' => "logo"
    ]) }}
</div>
@if ($logo)
    <div>
        <img src="{{ $logo->temporaryUrl() }}"/>
    </div>
@endif
@error('logo') <span class="error text-danger">{{ $message }}</span> @enderror
<button class="btn btn-primary rounded-pill text-center mt-3" style="width: 20%;" type="submit">submit</button>
</form>

运行环境 #

Laravel : 9.17.0 | 集成环境：Xampp

解决步骤 #

按以下顺序逐一排查即可解决问题：

1. 修复目录权限
   进入项目根目录，给storage目录递归设置读写权限：

   chmod -R 755 storage
   

   保证Web运行用户对临时文件存储目录storage/app/livewire-tmp有读写权限。
2. 校验Livewire配置
   如果未发布过Livewire配置文件，先执行命令生成配置：

   php artisan livewire:publish --config
   

   打开config/livewire.php，找到temporary_file_upload配置段，确认disk值为local，middleware数组仅保留web中间件，移除多余的鉴权、响应格式化类中间件，避免拦截预览文件的响应输出。
3. 检查PHP配置
   打开XAMPP对应的php.ini文件，核对以下配置项：
   • file_uploads = On
   • upload_max_filesize = 4M（需大于代码里设置的2M上传限制）
   • post_max_size = 8M（需大于upload_max_filesize值）
   • upload_tmp_dir指向的路径真实存在，且Web运行用户有读写权限
     修改完成后重启Apache服务生效。
4. 替换文件上传控件
   把模板里用Form门面生成的文件上传控件替换为原生input标签，排除门面生成属性时的绑定异常问题：

   <input type="file" id="logo" class="form-control rounded-5" accept="image/*" required wire:model="logo">
   

5. 清除缓存重启服务
   进入项目根目录执行命令清除所有缓存：

   php artisan optimize:clear
   

   如果用php artisan serve启动服务，停掉进程后重新启动即可。

内容的提问来源于stack exchange，提问作者Rajveer