如何在 laravel 中为 livewire 函数执行制作进度条

Question

我想为我的 Live Wire 功能进度制作一个进度条。 当我使用 wire:loading 时，我可以只显示旋转图标或另一个文本，如“uploading ...”，现在我该如何制作进度条？

我在 live Wire 文档中找到它，但不适用于 show 函数执行：

<script>
        document.addEventListener('livewire:load',() => {
            let progressSection = document.querySelector('#progressbar'),
                progressBar = progressSection.querySelector('#progress-fill');

            document.addEventListener('livewire-upload-start' , () => {});
            document.addEventListener('livewire-upload-finish' , () => {});
            document.addEventListener('livewire-upload-error' , () => {});
            document.addEventListener('livewire-upload-progress' , (event) => {
                progressSection.style.display = "block";
                console.log(`${event.detail.progress}%`);
                progressBar.style.width = `${event.detail.progress}%`;
            });
        });
        
</script>

在 live Wire 组件中，我将文件上传到我的 ftp 服务器，我想在运行上传方法时在前端显示文件的上传百分比。

非常感谢

Answer 1

我还必须使用 Alpine 来显示/隐藏目的，而且它可以很好地与 livewire 绑定。

以下是上传简历的示例。

<form wire:submit.prevent="uploadResume">

<div x-data="{ isUploading: false, progress: 0 }" 
     x-on:livewire-upload-start="isUploading = true"
     x-on:livewire-upload-finish="isUploading = false" 
     x-on:livewire-upload-error="isUploading = false"
     x-on:livewire-upload-progress="progress = $event.detail.progress">
    
    <input type="file" id="resume" wire:model="resume" aria-label="Resume" />

    <div class="mt-2" x-show="isUploading">
        <progress max="100" x-bind:value="progress"></progress>
    </div>
</div>

</form>

use Livewire\WithFileUploads;

class Upload extends Component
{
    use WithFileUploads;

    public function uploadResume()
    {
        // upon form submit, this function till fill your progress bar
    }
}