使用Multer上传文件后页面持续处于缓冲状态如何解决？

问题根源很直接：你的服务器在处理完文件上传后没有给浏览器返回任何响应，导致浏览器一直处于等待状态，所以页面会持续显示缓冲。

看你的Node.js代码，app.post的处理函数里把res.send('File uploaded');注释掉了——这就是关键。浏览器发起POST请求后，必须收到服务器的响应才会结束请求，否则会一直挂着等待。

具体修复步骤： #

1. 恢复响应语句，根据需求选择合适的响应类型：

   • 想直接提示上传成功：取消注释res.send('File uploaded');
   • 想跳回上传页面（推荐，用户体验更流畅）：用res.redirect('/public/index.html');
   • 前后端分离场景：返回JSON状态res.json({success: true, message: '文件上传成功'})

2. 优化表单action路径（可选但推荐）：
   把表单的action指向专门的上传接口（比如/upload），而非静态页面路径，这样代码逻辑更清晰，也符合接口设计规范。

修改后的完整代码示例： #

HTML部分：

<div class="button-wrap">
   <form action="/upload" enctype="multipart/form-data" method="POST">
   <label class="button" for="upload">Upload File</label>
   <input id="upload" name="filetoupload" type="file">
   <!-- 原代码缺少提交按钮，补充后用户可直接触发上传 -->
   <button type="submit">确认上传</button>
</div>

Node.js部分：

const fs = require('fs');
// 确保临时目录存在，multer不会自动创建目录
fs.mkdirSync('./public/temp', { recursive: true });

var fileStorage = multer.diskStorage({
  destination: (req, file, cb) => {
      cb(null, './public/temp')
  },
  filename: (req, file, cb) => {
      cb(null, Date.now() + '--' + file.originalname)
  }
});

var upload = multer({ storage: fileStorage })

// 改用专门的上传接口路径
app.post('/upload', upload.single('filetoupload'), (req, res) => {
  console.log('文件上传完成:', req.file); // 打印req.file能看到上传文件的具体信息
  // 跳回原页面，结束请求，页面不再缓冲
  res.redirect('/public/index.html');
});

额外提示： #

• 务必确保./public/temp目录存在，否则multer会报错，上面的代码用fs.mkdirSync加recursive: true可以自动创建多级目录。
• 日志打印req.file比打印整个req和fileStorage更有实际意义，能快速确认上传是否成功。

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