laravel Livewire如何实现文件上传和进度条_Laravel Livewire文件上传与进度条实现方法

<?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;"><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');
}

<div>
    <form wire:submit.prevent="save">
        <input type="file" wire:model="file" />
<pre class="brush:php;toolbar:false;"><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

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 = '上传失败';
});

<style>
progress {
    width: 100%;
    height: 20px;
    border-radius: 4px;
}
</style>