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

Cuando Id trabajar con éxito esta vez, el nombre no captura la ruta de la imagen.

Eso significa matriz vacía.
Pero cuando elimine Id, use name="image[]" enviar valor con éxito.

-1
LS Computer School 15 oct. 2019 a las 20:07

1 respuesta

La mejor respuesta

Suponiendo que tenga un formulario, puede enviar las imágenes a través de Ajax utilizando la API de búsqueda como tal

<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>

Y devuelve la matriz de rutas para las imágenes así.

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

Y sin un formulario, escuche el cambio de entrada

<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>

Y acceder desde el backend

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

Ahora puede ver las rutas de las imágenes almacenadas en el directorio público en la pestaña de red de las herramientas de desarrollo.

Espero que esto ayude

0
Salim Djerbouh 15 oct. 2019 a las 20:40