如何使用 fetch API 发布多个文件？

Posted 2023-02-27

【中文标题】如何使用 fetch API 发布多个文件？

【英文标题】：How to post multiple files with fetch API?

【发布时间】：2020-02-12 12:49:58

【问题描述】：

我正在尝试使用 fetch API 从输入中发布多个文件，但附加后表单数据仍然为空

我查看了here、here、here、here 和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());
);

我因此得到一个空数组

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

【参考方案1】：

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

【讨论】：

将其设置为 multipart/form-data 没有帮助，将其完全删除可以解决问题，谢谢

控制台仍然记录一个空的 FormData，知道为什么吗？

@Saly3301 您不能通过控制台直接记录 FormData 来检查它。您可以使用 FormData.get('key-name') 控制台记录特定值，也可以使用 FormData.entries() 根据此示例：developer.mozilla.org/en-US/docs/Web/API/FormData/entries