添加更多图像输入文件答案

【问题标题】：Add more images input files添加更多图像输入文件
【发布时间】：2021-04-10 17:12:59
【问题描述】：

几天来我一直在研究如何改进图像加载功能而没有结果。

问题：

通过创建多张图片上传按钮，用户可以选择任意数量的图片。为了将该过程限制为只能上传 30 张图片，我使用了 max: 30，它似乎工作正常。

如果用户再次单击该按钮，它会将加载的图像替换为选定的新图像。因此，我尝试创建一个允许添加更多图像的功能：

我的意见：

<input wire:model="imagenes" type="file" name="imagenes" accept="image/*" class="form-control-file" multiple>

添加更多图片功能：

<button class="text-white btn btn-info btn-sm" wire:click.prevent="add({{$i}})">
     Agregar más fotos
</button>   

@foreach($inputs as $key => $value)        
    <input wire:model="name.{{ $value }}" type="file" name="imagenes" accept="image/*" class="form-control-file">        
@endforeach

我需要能够验证在视图中的两个输入之间上传的图像不超过 30 个。

验证：

$this->validate([
    'imagenes' => 'max:30',
]);

他们可以给我更多的光来完成这个功能。非常感谢

【问题讨论】：

你是向 Laravel 发送表单请求还是使用 Livewire 处理所有事情？
我从 livewire 组件处理一切
从您的代码看来，您应该以某种方式限制 $inputs 计数不超过 30。所以您将只有 30 张图像。
你能给我一个建议吗，我想数数但它不允许我

标签： javascript php laravel laravel-7 laravel-livewire

【解决方案1】：

这有帮助吗？它不允许超过 30 个输入。虽然我真的建议您也检查 Livewire 组件中的图像总数，因为用户可以轻松添加更多输入。

$c = 0;
@foreach($inputs as $key => $value)
    @php if ($c++ > 30) @break @endphp
    <input wire:model="name.{{ $value }}" type="file" name="imagenes" accept="image/*" class="form-control-file">        
@endforeach

【讨论】：