Как использовать идентификатор и имя при загрузке нескольких изображений?

Question

<input class="form-control" type="file" id="pro-image" name="image[]" multiple>

Когда Id работает успешно, на этот раз Name не перехватывает путь к изображению.

Это означает, что пустой массив.
Но при удалении Id просто используйте name="image[]", успешно отправьте значение.

Answer 1

Предполагая, что у вас есть форма, вы можете отправлять изображения через Ajax, используя API извлечения, например, так:

<form action="/" method="post" enctype="multipart/form-data">
    @csrf
    <input class="form-control" type="file" id="pro-image" name="image[]" multiple>
    <button type="submit">Submit</button>
</form>

<script>
    let form = document.forms[0];
    form.onsubmit = (event) => {
        event.preventDefault();
        fetch('/', {
            method: 'POST',
            credentials: "same-origin",
            body: new FormData(form),
        });
    }
</script>

И возвращать массив путей для изображений примерно так:

Route::post('/', function () {
    $images = request()->file('image');
    $paths = [];
    foreach ($images as $image) {
        $paths[] = $image->store('/public');
    }
    return $paths;
});

И без формы, слушайте изменения ввода

<meta name="csrf-token" content="{{ csrf_token() }}">
<input class="form-control" type="file" id="pro-image" name="image[]" multiple onchange="submit()">

<script>
    function submit() {
        var ins = document.getElementById('pro-image').files.length;
        var fd = new FormData();
        for (var x = 0; x < ins; x++) {
            fd.append("pro-image[]", document.getElementById('pro-image').files[x]);
        }
        fetch('/', {
            headers: {
                "Accept": "application/json",
                "X-Requested-With": "XMLHttpRequest",
                "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
            },
            method: 'POST',
            credentials: "same-origin",
            body: fd,
        });
    }
</script>

и доступ из бэкэнда

Route::post('/', function () {
    $images = request()->file('pro-image');
    $paths = [];
    foreach ($images as $image) {
        $paths[] = $image->store('/public');
    }
    return $paths;
});

Теперь вы можете видеть пути сохраненных изображений в публичном каталоге на вкладке сети инструментов dev

Надеюсь, это поможет