如何使用 fetch API post 多个文件？

Question

我正在尝试使用提取 API 从一个输入中 post 多个文件，但在附加

后表单数据仍然为空

我查看了答案here, , , and here并尝试了所有答案都无济于事

我正在为后端使用 Laravel 框架，这是我的 Blade 视图文件

<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]);
        }
        console.log(fd);
        fetch('/', {
            headers: {
                "Content-Type": "application/json",
                "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 () {
    dd(request()->all());
});

其中我得到一个空数组

真的不知道为什么这不起作用！知道哪里做错了吗？

Answer 1

删除您的 Content-Type: application/json header，或将其设置为 multipart/form-data。

如何使用 fetch API post 多个文件？

How to post multiple files with fetch API?

javascript

form-data

fetch

filelist

laravel