Laravel Livewire 支持文件上传与进度条显示，需配置临时路径、设置磁盘并创建组件，通过 WithFileUploads 实现上传功能，在 Blade 中结合 wire:loading 与 JavaScript 钩子模拟进度条，提升用户体验。

Laravel Livewire 提供了简洁的方式处理文件上传，同时配合前端可以实现上传进度条。整个过程无需手动编写大量 JavaScript，适合在现代化 Laravel 项目中快速集成。

1. 配置 Livewire 文件上传支持

Livewire 原生支持文件上传，但需要确保配置正确：

• 在 config/livewire.php 中确认临时上传路径设置（默认为 storage/app/livewire-tmp）
• 确保该目录可写：storage/app/livewire-tmp
• 在 filesystems.php 中设置默认磁盘（如 public 或 s3）
• 发布 Livewire 资源（如有需要）：php artisan livewire:publish --assets

2. 创建支持文件上传的 Livewire 组件

使用 Artisan 命令创建组件：

编辑生成的组件类：

namespace App\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;
class FileUpload extends Component
{
use WithFileUploads;
public $file;
public $uploadProgress = 0;

public function save()
{
    $this->validate([
        'file' => 'required|file|max:10240', // 最大 10MB
    ]);

    $path = $this->file->storeAs(
        'uploads',
        $this->file->getClientOriginalName(),
        'public'
    );

    $this->reset('file');
    session()->flash('message', '文件上传成功！');
}

public function updatedFile()
{
    // 可在这里触发上传开始提示
}

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

3. 构建 Blade 视图并添加进度条
Livewire 不直接提供上传进度数值，但可通过监听 xhr 请求模拟进度条。
创建视图 resources/views/livewire/file-upload.blade.php：
    

        
    {{-- 显示验证错误 --}}
    @error('file') {{ $message }} @enderror

    {{-- 上传中显示进度条 --}}
    
        
        0%
    

    上传文件


@if (session()->has('message'))
    {{ session('message') }}
@endif

Livewire.hook('message.sent', () => {
    if (Livewire.hook('request.url').includes('file')) {
        let interval = setInterval(() => {
            if (progressBar.value < 90) {
                progressBar.value += 1;
                progressText.textContent = Math.round(progressBar.value) + '%';
            } else {
                clearInterval(interval);
            }
        }, 200);
    }
});

Livewire.hook('message.received', () => {
    progressBar.value = 100;
    progressText.textContent = '100%';
});

Livewire.hook('message.failed', () => {
    progressText.textContent = '上传失败';
});
});


4. 样式优化与用户体验
可以为进度条添加简单样式提升视觉效果：

也可替换为 div 模拟的进度条，便于自定义外观。
基本上就这些。Livewire 的文件上传机制结合简单的 JS 钩子，就能实现带进度反馈的体验。虽然不能精确获取服务器传输字节，但模拟进度已能满足大多数场景。注意大文件建议配合后端分片或使用专用上传库增强稳定性。