Question

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

此ID成功运行后，此时Name不能捕获图像路径。

这意味着空数组。
但是，当删除ID时，只需使用name="image[]"成功提交值即可。

Answer 1

假设您有一个表单，可以像这样使用获取API通过Ajax提交图像

<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;
});

现在，您可以在开发人员工具的“网络”标签上查看公共目录中存储的图像的路径

希望这会有所帮助

如何在多张图片上传中同时使用ID和名称？

1 个答案: