Question

我想通过 Laravel/Livewire 创建一个几乎简单的文件上传，但是一旦提交具有两个输入和一个文件输入的表单，表单字段就会聚焦并停止。但是，再次按下提交按钮后，它会按预期上传成功消息。如何通过第一个按钮提交来实现这一点？

Livewire 组件

namespace App\Http\Livewire\Files;

use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Livewire\Component;
use Livewire\WithFileUploads;
use App\Models\File;

class FilesForm extends Component
{
    use WithFileUploads;

    public $file;
    public $name;
    public $doctype;
    public $doctypes;
    public $doctypeparent;
    public $docs;

    public function mount($id)
    {

        $this->doctypeparent = $id;
    }

    public function save()
    {

        $validatedData = $this->validate([
            'doctype' => 'required',
            'file' => 'required|image|mimes:jpg,jpeg,png,svg,gif|max:10240',
        ]);


        $filename = $this->file->store('files','public');

        $validatedData['content_type_id'] = $this->doctype;
        $validatedData['name'] = $this->name;
        $validatedData['file'] = $filename;
        $validatedData['user_id'] = Auth::id();
        $validatedData['slug'] = uniqid();

        File::create($validatedData);

        session()->flash('message', 'Datei erfolgreich gespeichert.');

        $this->doctype="";
        $this->name="";
        $this->file="";
        $this->render();

        //return redirect()->to('/fileupload');
    }

    public function render()
    {
        $this->doctypes = DB::table('content_type')
        ->select('content_type.id', 'content_type.strTitleDe')
        ->where('content_type.fkintContentGroup', '=', $this->doctypeparent)
        ->orderBy('content_type.intPriority')
        ->get();


        $this->docs = File::all();

        //dd($this->docs);

        return view('livewire.files.files-form');
    }
}

Livewire 刀片

<div class="file-form">
    <form wire:submit.prevent="save">
        @if (session()->has('message'))
        <div class="alert alert-success">
            {{ session('message') }}
        </div>
        @endif

        <div class="form-group">
            <label for="name">Typ</label>
            <select class="form-control" id="doctype" name="doctype" wire:model="doctype">
                <option value="">- - -</option>
                @foreach ($doctypes as $doctype)
                <option value="{{ $doctype->id }}">{{ $doctype->strTitleDe }}</option>
                @endforeach
            </select>
            @error('doctype') <span class="error">{{ $message }}</span> @enderror
        </div>
        <div class="form-group">
            <label for="name">Bezeichnung</label>
            <input type="text" class="form-control" max="255" id="name" placeholder="" wire:model="name">
            @error('name') <span class="text-danger">{{ $message }}</span> @enderror
        </div>

        <div class="form-group">
            <div class="custom-file">
                <label for="file">Datei:</label>
                <input type="file" class="form-control" id="file" wire:model="file">
                @error('name') <span class="error">{{ $message }}</span> @enderror
            </div>
        </div>


        <button type="submit" class="btn btn-primary">Speichern</button>
    </form>
    <p></p>
    <h3>Dokumente</h3>
    <table>
        <thead>
        <tr>
            <td>Typ</td>
            <td>Title</td>
        </tr>
        </thead>
        <tbody>
        @foreach($docs as $doc)
        <tr>
            <td>Typ</td>
            <td>{{ $doc->name}}</td>
        </tr>
        @endforeach
        </tbody>
    </table>
</div>

Answer 1

不确定这是否有帮助，但是.....虽然看起来这可行，但我在使用 livewire 时从不进行实际的表单提交 - 所有数据都与 wire:model 绑定。根本不需要使用表格。我只是使用带有 wire:click 的按钮并调用任何保存文件的函数。

通过这种方式，我在上传文件时遇到了零问题。

Laravel Livewire 仅在第二次提交/按下按钮后上传文件

1 个答案: