laravel - Laravel Livewire 仅在第二次提交/按钮按下后才上传文件
问题描述
我想通过 Laravel/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');
}
}
活线刀片
<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>
解决方案
不确定这是否有帮助,但是.....虽然看起来这可行,但我在使用 livewire 时从不进行实际的表单提交——所有数据都与 wire:model 绑定。根本不需要使用表格。我只是使用带有wire的按钮:单击并调用保存文件的任何函数。
这样做我的文件上传问题为零。
推荐阅读
- c# - 如何使用 linqdatasource.delete 方法
- android - Kotlin 是否支持 Dialogflow?
- azure - 无法将数据帧写入 azure cosmo db
- xpath - 如何在绝对 xpath 中捕获特定节点的索引号
- vim - 在可视块插入模式下切换光标位置
- java - 如何使用 jsonschema2pojo 生成包含名为“System”的类的类?
- python - 急切执行 tf.dataset 实例
- javascript - Sinon 存根方法 withArgs 匹配特定对象键
- selenium - 登录主页加载然后刷新后由于刷新无法识别定位器
- python - TracerWarning:将张量转换为 Python 索引可能会导致跟踪不正确