文件上传至服务器异常：客户端发送文件但服务器未接收

问题场景 #

Windows 10 + VS Code环境下，前端通过表单选择文件并发送后，后端Express服务始终无法接收到文件，代码已简化至最简形式仍未解决。

前端代码问题修复 #

核心问题：手动设置Content-Type导致解析失败 #

当使用fetch传递FormData时，浏览器会自动生成包含boundary的Content-Type头（格式类似multipart/form-data; boundary=----WebKitFormBoundaryxxxx），手动设置固定的Content-Type会丢失boundary参数，导致后端无法正确解析表单数据。

修改后的前端发送函数：

function uploadFile() {
  var input = document.getElementById("fileInput");
  var file = input.files[0];
  var formData = new FormData();
  formData.append("file", file);

  fetch("http://127.0.0.1:5000/api/fileupload", {
    method: "POST",
    body: formData,
    // 移除手动设置的Content-Type，由浏览器自动生成
  })
    .then((response) => {
      if (response.ok) {
        return response.text(); // 改为获取响应文本，便于查看结果
      }
    })
    .then((data) => {
      console.log("上传结果：", data);
    })
    .catch((error) => {
      console.error("上传错误：", error);
    });
}

后端代码优化与排查 #

1. 明确请求方法匹配 #

当前使用app.use会匹配所有HTTP请求方法，建议改为app.post仅处理POST请求，避免其他请求干扰：

// 替换原app.use为app.post
app.post("/api/fileupload", (req, res) => {
  console.log("接收到的文件：", req.files); // 新增调试日志，查看接收情况
  if (req.files && req.files.hasOwnProperty("file")) {
    const uploadedFile = req.files.file;
    console.log("文件名：", uploadedFile.name);
    res.status(200).send("文件接收成功"); // 新增成功响应，让前端确认结果
  } else {
    res.status(400).send("未检测到上传文件");
  }
});

2. 确认依赖安装与中间件顺序 #

• 确保已安装express-fileupload依赖：执行npm install express-fileupload
• 调整中间件顺序，fileUpload应放在express.json之前（避免JSON解析干扰表单数据）：

const app = express();
const PORT = config.get("PORT");

// 调整中间件顺序
app.use(cors());
app.use(fileUpload()); // 先处理文件上传
app.use(express.json()); // 再处理JSON数据

3. 验证端口一致性 #

检查后端启动日志中的port输出，确认与前端请求的5000端口一致，若不一致需修改配置或前端请求地址。

调试建议 #

• 前端调试：在uploadFile函数中添加日志，确认文件已正确获取：

console.log("选中的文件：", file);
console.log("FormData内容：", [...formData.entries()]);

• 后端调试：在路由中打印req.headers，查看请求头是否包含正确的Content-Type：

console.log("请求头：", req.headers["content-type"]);

内容的提问来源于stack exchange，提问作者vadim savchuk