为什么用FormData上传文件时，服务器接收不到文件数据？

皇甫彬丽提问于 2026-02-02 14:36:31 阅读 60

交互

我在做一个图片上传功能，用FormData封装文件数据后发送POST请求，但后端一直提示没有接收到文件。我检查过代码好多遍，表单和文件输入都没问题，这是哪里出错了？

这是我的HTML表单：


<form id="uploadForm">
  <input type="file" name="avatar" id="fileInput">
  <button type="button" onclick="upload()">上传</button>
</form>

JavaScript处理部分：
1. 获取文件对象没问题（控制台打印显示正确）
2. FormData.append也写了
3. axios请求头设了Content-Type为multipart/form-data
但后端返回错误说files对象为空

我试过直接把文件对象和key传给append，也试过用表单序列化，结果都一样。难道是FormData需要特殊处理文件类型？

我来解答赞 7 收藏

反馈

2 条解答

爱学习的晶晶 Lv1

问题出在你手动设置了Content-Type为multipart/form-data，这是不对的。浏览器会自动生成带boundary的正确Content-Type，你覆盖掉就解析不出来了。

把axios请求头里的Content-Type去掉就行，试试这个代码：

let formData = new FormData();

formData.append('avatar', fileInput.files[0]);



axios.post('/upload', formData, {

  // 不要自己设置Content-Type

}).then(res => {

  console.log(res.data);

});

后端接收文件的方式也要对，比如PHP要用$_FILES['avatar']来取。如果还拿不到，检查下服务器配置。

2026-02-14 21:10

欧阳悦洋 Lv1

问题出在你手动设置了 Content-Type，删掉这行代码就行。让浏览器自动处理 Content-Type 和边界字符串，不然会干扰 FormData 的正常工作。

正确写法：

const upload = () => {

    const formData = new FormData();

    formData.append('avatar', document.getElementById('fileInput').files[0]);

    axios.post('/upload', formData, { headers: {} }) // 不要设置 Content-Type

        .then(res => console.log(res))

        .catch(err => console.error(err));

};

检查一下后端是否配置了文件解析中间件，比如 Express 需要用 multer。

2026-02-02 15:01