Laravel Livewire 在缓慢上传之前刷新视图

Question

我有一个 livewire 组件，它实现了 Spatie Media Library Pro 组件：

// file-upload.blade.php
<form method="POST" wire:submit.prevent="submit">
  @csrf
  <div class="mb-3">
    <x-media-library-attachment name="media" :rules="$mimeTypes" key="mediaLibrary"/>
  </div>
  @if($uploading)
    <h2>Please wait...</h2>
  @endif
  <input type="submit" class="btn btn-primary btn-bg" />
</form>

我想显示上传消息，因为请求很慢（@if($uploading) 以上）。

问题是，如果我这样做：

public function submit(){
  $this->validate([
    'media' => 'required|min:1',
  ]);
  
  $this->uploading = true;

  \Auth::user()->currentTeam
    ->addFromMediaLibraryRequest($this->media)
    ->toMediaCollection($this->collection);

  $this->clearMedia();

  return redirect()->route('media.index', ['collection' => $this->collection]);
}

$this->uploading = true; 行仅在整个功能完成时刷新我的页面 — 即 上传完成后。

有什么办法可以显示这个，然后上传文件吗？我走下坡路的大多数其他路线要么破坏了验证，我尝试使用 @entangle 并从前端切换 $uploading 但似乎对我没有任何作用。

我想我已经决定要保留现有的内容，但要么异步开始上传，要么更快地刷新视图。

Answer 1

您可以使用 Livewire 加载状态 (https://www.laravel-livewire.com/docs/2.x/loading-states)

<form method="POST" wire:submit.prevent="submit">
  @csrf
  <div class="mb-3">
    <x-media-library-attachment name="media" :rules="$mimeTypes" key="mediaLibrary"/>
  </div>
  <input type="submit" class="btn btn-primary btn-bg" />
</form>
<div wire:loading wire:target="submit">
   Loading...
</div>

PD：我之前没有在表格里测试过

Laravel Livewire 在缓慢上传之前刷新视图

Laravel Livewire refresh view before slow upload

laravel

laravel-livewire