Livewire 上传进度 - Javascript

Livewire 是一个基于 Laravel 的全栈框架，它的主要目标是让开发者可以使用 PHP 和 Blade 模板语言来构建现代的、交互式的 Web 应用。如果你正在开发一个需要上传文件的应用，那么你可能会需要了解如何能够显示上传进度。

Livewire 文件上传基础

Livewire 提供了一个文件上传组件，它可以让你在 Web 应用上方便地上传文件。

<form wire:submit.prevent="upload">
    <input type="file" wire:model="photo">
    <button type="submit">上传</button>
</form>

在上传文件时，你需要考虑到以下几点：

• 你必须通过 wire:submit.prevent 属性来阻止默认的表单提交行为；
• 你需要使用 wire:model 属性来绑定文件输入元素（input[type=file]）的 value 属性；
• 你需要使用 wire:target 属性来指定 Livewire 组件的哪个属性应该接收上传文件。

public function upload()
{
    $this->photo->store('photos');
}

在处理上传文件时，你需要注意以下几点：

• 你需要添加 enctype="multipart/form-data" 属性来告知浏览器当前表单包含二进制数据（文件）；
• 你需要将上传的文件存储到磁盘或者云存储中；
• 你可以使用 Livewire 的 wire:loading 命令来阻止上传按钮在上传期间被再次点击。

<form wire:submit.prevent="upload" enctype="multipart/form-data">
    <input type="file" wire:model="photo">
    <button type="submit" wire:loading.attr="disabled">上传</button>
</form>

Livewire 上传进度

如果你的应用需要上传大型文件，那么你可能需要提供一个进度条，让用户知道文件上传的进度。你可以使用 JavaScript API 来获取文件上传的进度并显示它。

<form wire:submit.prevent="upload" enctype="multipart/form-data">
    <input type="file" wire:model="photo">
    <button type="submit" wire:loading.attr="disabled" @click="uploadStart">上传</button>
    <div id="progressBar" style="display:none;">
        <div id="progressBarInner"></div>
    </div>
</form>

<script>
    function uploadStart() {
        var progressBar = document.getElementById('progressBar');
        progressBar.style.display = 'block';

        Livewire.hook('element.initialized', (el, component) => {
            if (el.id === 'photo') {
                const uploader = el.parentElement.querySelector('input[type=file]');

                uploader.addEventListener('change', () => {
                    const file = uploader.files[0];
                    const formData = new FormData();

                    formData.append(el.getAttribute('wire:model'), file);

                    const xhr = new XMLHttpRequest();

                    xhr.open('POST', component.getActionUrl('upload'));

                    xhr.upload.addEventListener('progress', event => {
                        if (event.lengthComputable) {
                            const percentage = Math.round((event.loaded * 100) / event.total);
                            progressBar.querySelector('#progressBarInner').style.width = percentage + '%';
                        }
                    });

                    xhr.send(formData);
                });
            }
        });
    }
</script>

在上传开始时，显示进度条。在 Livewire 的 element.initialized 钩子函数中，检测文件上传组件的变化。使用 XMLHttpRequest 对象来执行文件上传，并在上传期间更新进度条。

以上代码演示了如何在 Livewire 应用中显示文件上传的进度，并提供了一个简单的 JavaScript API 来实现这个功能。在使用时，你需要将代码粘贴到你的应用中，并根据自己的需要作必要的调整。