Fetch上传文件（不需要设置headers）

最新推荐文章于 2025-05-29 01:53:29 发布

原创

最新推荐文章于 2025-05-29 01:53:29 发布 · 6.4k 阅读

7 ·

CC 4.0 BY-SA版权

本文探讨了使用Fetch API上传文件的细节，发现不指定Content-Type时，默认会正确设置为multipart/form-data，解决了文件上传失败的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Fetch上传文件（不需要设置headers）

最近在项目中有一个上传文件的需求，然后我使用了fetch进行文件上传，
代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试fetch上传文件</title>
  </head>
<body>
 <input type="file" id="files" onchange="upload(event)"/>
 <script type="text/javascript">
   function upload(event) {
     const formData = new FormData();
     formData.append('file', event.target.files[0]);
     fetch('/upload', {
       method: 'post',
       headers: {
          'Content-Type': 'multipart/form-data',
        },
       body: formData,
       }).then(response => response.json())
       .then((data) => {
            console.log(data);
       });
      }
 </script>
</body>
</html>

运行结果：

code: 9999
data: []
msg: "文件不存在"
time: 1546948790.707762

我们查看一下Request Header

Content-Type: multipart/for

最低0.47元/天解锁文章

200万优质内容无限畅学