如何使用 livewire 重置文件输入答案

【问题标题】：How To Reset File input using livewire如何使用 livewire 重置文件输入
【发布时间】：2021-02-26 06:52:22
【问题描述】：

有谁知道如何重置我的输入类型=“文件”。我一直在使用$this->reset()来清除输入type="file"的属性。

    $this->reset(['type', 'name', 'institution', 'year', 'certification']);

【问题讨论】：

【解决方案1】：

如果您不需要将id 用于任何其他目的，您可以像这样呈现输入：

<input type="file" id="{{ rand() }}" >

除了使用rand()，您还可以使用某种计数器或任何其他在每次渲染时都会改变的值。不同的id 将强制livewire 将元素完全替换为新元素，从而为空。仅设置 value="" 无济于事，因为 input type="file" 是不可变的。本解决方案取自here

【讨论】：

【解决方案2】：

为了重置 livewire 中的文件输入，我从该输入中删除了 id。并为该值分配一个空值。

<label>Upload Image
    <input type="file" wire:model="image" class="w-full">
</label>

$this->image = null;

【讨论】：

【解决方案3】：

这是我在 TALL Stack Tips 中找到的解决方案，用于在通过 Livewire 上传后从输入字段中删除文件名。 https://talltips.novate.co.uk/livewire/livewire-file-uploads-using-s3#removing-filename-from-input-field-after-upload

解决方案涉及实现一个计数器来调节输入文件 id

【讨论】：