如何修改res.send('success')的跳转目标？文件上传场景技术问询

嘿，这个问题我帮你捋清楚哈～

为什么会出现“页面自动后退两级”的现象？ #

核心原因是你用了传统的同步表单提交方式，而不是异步提交（比如AJAX/Fetch）：
当用户提交表单时，浏览器会默认发起同步POST请求，然后直接导航到服务器返回的响应页面——也就是你用res.send('success')返回的纯文本页面。
举个场景：假设你是从「首页→方案列表页→编辑页」进入的上传页面，提交后浏览器会加载这个只有success文本的新页面，此时浏览器的历史栈就变成了「首页→列表页→编辑页→success页」。你感觉到的“自动后退两级”，大概率是因为这个空白的success页面没有任何交互，要么是你下意识触发了后退，要么是这种跳转和你预期的“留在编辑页/跳转到列表页”不符，产生了“后退”的错觉。

怎么修改跳转目标？ #

你有两种灵活的解决方案，完全可以按照自己的需求来选：

方案1：服务器端直接重定向（跳转到指定页面）

如果你希望上传成功后直接跳转到某个页面（比如方案列表页、编辑页），别再用res.send('success')了，换成res.redirect()就行：

router.post('/schemes/edit-data/:fname', fileupload(), function(req, res) {
  var sampleFile = req.files.pho;
  var dir = './public/uploads/schemes/' + sampleFile.name;
  // 这里是你的文件保存逻辑...
  
  // 保存完成后，重定向到你想要的页面
  // 比如跳回方案列表页
  res.redirect('/schemes');
  // 或者跳回编辑页，还能带上成功提示参数
  // res.redirect(`/schemes/edit-data/${req.params.fname}?success=1`);
});

这样浏览器收到重定向响应后，会自动跳转到你指定的页面，不会停留在那个尴尬的success文本页，自然就不会有“后退”的问题了。

方案2：前端改用异步提交（完全控制页面行为）

如果你想上传成功后不跳转页面，就在当前页显示成功提示，或者手动控制跳转/后退，那得用异步方式提交表单。比如用Fetch API写个简单的例子：

<!-- 前端的表单 -->
<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="pho" />
  <button type="submit">上传文件</button>
</form>

<script>
document.getElementById('uploadForm').addEventListener('submit', async (e) => {
  // 先阻止表单默认的同步提交行为
  e.preventDefault();
  
  const formData = new FormData(e.target);
  try {
    const response = await fetch(`/schemes/edit-data/${你的文件名}`, {
      method: 'POST',
      body: formData
    });
    const result = await response.text();
    if (result === 'success') {
      // 这里完全自定义行为：比如弹个提示
      alert('上传成功啦！');
      // 要是想跳转页面就手动写：
      // window.location.href = '/schemes';
      // 要是想后退指定步数也能控制：
      // history.go(-1); // 后退1级
      // history.go(-2); // 后退2级（就是你原来的“自动后退”效果，现在可以主动控制）
    }
  } catch (error) {
    console.error('上传出错了:', error);
    alert('上传失败，请重试哦');
  }
});
</script>

这种方式下，页面不会自动跳转，所有后续行为都由你说了算——不管是显示提示、跳转到指定页面，还是主动控制后退步数，都完全没问题。

内容的提问来源于stack exchange，提问作者Dilan Sachintha Nayanajith