FormData 上传文件后端收不到，哪里出问题了？

UX薪羽提问于 2026-03-16 17:40:20 阅读 44

交互

我用 FormData 上传文件，但后端一直拿不到 file 字段，试了好几次都这样，是不是我写法有问题？

前端代码是这么写的：

<input type="file" id="fileInput" />
<button onclick="uploadFile()">上传</button>

<script>
function uploadFile() {
  const input = document.getElementById('fileInput');
  const file = input.files[0];
  const formData = new FormData();
  formData.append('file', file);

  fetch('/upload', {
    method: 'POST',
    body: formData
  });
}
</script>

后端用的是 Express + multer，其他接口都正常，就这个传文件不行，控制台也没报错，真的搞不懂了。

我来解答赞 8 收藏

反馈

1 条解答

司空亚龙 Lv1

问题找到了，你的 fetch 请求少了个关键东西。

前端代码里你没有设置 Content-Type，但这不是让你手动设置，而是 —— 根本别设置。FormData 上传文件时，浏览器会自动计算并添加正确的 multipart/form-data 类型和 boundary，你手动写了 Content-Type 反而会坏事儿。

改成这样：

function uploadFile() {

  const input = document.getElementById('fileInput');

  const file = input.files[0];

  if (!file) {

    alert('先选个文件');

    return;

  }

  

  const formData = new FormData();

  formData.append('file', file);



  fetch('/upload', {

    method: 'POST',

    body: formData

  }).then(res => console.log('上传成功')) .catch(err => console.error(err));

}

后端确认下你的 multer 配置大概是：

const multer = require('multer');

const upload = multer({ dest: 'uploads/' });



app.post('/upload', upload.single('file'), (req, res) => {

  console.log(req.file); // 这里应该能拿到了

  res.send('ok');

});

只要你没手动写 Content-Type，这应该就能跑了。

2026-03-17 04:03