Livewire 3 文件上传异常：点击上传时提示file is undefined

问题场景 #

在全新Laravel 11项目中使用最新版Livewire测试文件上传功能，选择文件后服务端已收到请求，临时文件也成功存储到livewire-tmp文件夹，但点击上传按钮时控制台抛出**“file is undefined”**错误。

解决方案 #

1. 移除表单中的@csrf标记 #

Livewire会自动处理CSRF防护，手动添加的@csrf会干扰Livewire的请求解析逻辑，导致表单数据异常。修改后的视图代码如下：

<div class="card mt-2">
    <div class="card-header" style="background-color: cornflowerblue;color:white">
        Upload File
    </div>
    <div class="card-body">
        <form wire:submit='upload'>
            <div class="mb-3">
                <label class="form-label">Select File</label>
                <input wire:model="file" name="file" id="file" type="file" class="form-control">
                @error('file')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary btn-block">Upload</button>
            </div>
            @if (session()->has('message'))
                <div class="alert alert-success mt-3">
                    {{ session('message') }}
                </div>
            @endif
        </form>
    </div>
</div>

2. 优化组件验证逻辑 #

使用Livewire 3推荐的#[Rule]属性定义验证规则，替换手动的updatedFile方法验证，确保规则生效且符合框架规范：

<?php

namespace App\Livewire;

use App\Models\Upload;
use Livewire\Component;
use Livewire\Attributes\Rule;
use Livewire\WithFileUploads;

class UploadFile extends Component
{
    use WithFileUploads;

    #[Rule('required|file')]
    public $file;

    public function mount()
    {
        logger('Component mounted with:', ['uploadedFile' => $this->file]);
    }

    public function upload()
    {
        $this->validate();
        
        // 在这里添加文件持久化逻辑，示例：
        // $storagePath = $this->file->store('uploads');
        // Upload::create(['file_path' => $storagePath]);
        
        session()->flash('message', 'File uploaded successfully.');
        $this->file = null;
        $this->dispatch('update-list');
    }

    public function render()
    {
        return view('livewire.upload-file');
    }
}

3. 清除浏览器缓存 #

旧的Livewire JS缓存可能导致兼容性问题，清除浏览器缓存后重新加载页面测试。

4. 确认目录权限与配置 #

检查config/livewire.php中的临时目录配置，并确保目录有写入权限：

'tmp_path' => storage_path('app/livewire-tmp'),

执行命令修复目录权限：

chmod -R 755 storage/app/livewire-tmp

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