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 命令创建组件：
php artisan make:livewire FileUpload编辑生成的组件类：
<?php
<p>namespace App\Livewire;</p><p>use Livewire\Component;
use Livewire\WithFileUploads;</p><p>class FileUpload extends Component
{
use WithFileUploads;</p><pre class="brush:php;toolbar:false;">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：
<div>
<form wire:submit.prevent="save">
<input type="file" wire:model="file" />
<pre class="brush:php;toolbar:false;"> {{-- 显示验证错误 --}}
@error('file') <span class="text-red-500">{{ $message }}</span> @enderror
{{-- 上传中显示进度条 --}}
<div wire:loading wire:target="file" class="mt-2">
<progress id="progress-bar" value="0" max="100"></progress>
<span id="progress-text">0%</span>
</div>
<button type="submit" class="mt-3">上传文件</button>
</form>
@if (session()->has('message'))
<div class="text-green-500 mt-2">{{ session('message') }}</div>
@endif
<script> document.addEventListener('livewire:load', function () { const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text');</script>
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. 样式优化与用户体验
可以为进度条添加简单样式提升视觉效果：
<style>
progress {
width: 100%;
height: 20px;
border-radius: 4px;
}
</style>
也可替换为 div 模拟的进度条，便于自定义外观。
基本上就这些。Livewire 的文件上传机制结合简单的 JS 钩子，就能实现带进度反馈的体验。虽然不能精确获取服务器传输字节，但模拟进度已能满足大多数场景。注意大文件建议配合后端分片或使用专用上传库增强稳定性。
