表单提交后页面跳转是默认行为，需确保不被javascript阻止且服务端响应正确；用fetch时必须await等待成功响应后再调用window.location.replace()。
form 表单提交后页面跳转是默认行为
只要没用 JavaScript 阻止表单默认提交，<form></form> 提交成功后浏览器就会自动跳转到 action 指定的 URL。关键不是“怎么实现跳转”，而是“怎么确保跳转发生且不被干扰”。
常见错误是加了 event.preventDefault() 却忘了手动跳转，或者用了 fetch / XMLHttpRequest 后没写 window.location.href = ...。
- 服务端返回 HTTP 302 重定向响应，浏览器会自动跳转（无需前端额外代码）
- 服务端返回 200 + HTML 页面（比如
<meta http-equiv="refresh" content="0;url=/success">），也能跳转，但不推荐——延迟不可控、SEO 不友好、无错误兜底 - 前端用
fetch上传后，必须显式调用window.location.href或window.location.replace()
用 fetch 上传后跳转要等响应完成再执行
fetch 是异步的，如果在 await fetch(...) 前或网络未完成时就跳转，文件可能根本没传上去。
典型错误写法：fetch(...); window.location.href = '/done'; —— 这等于没上传就走了。
- 务必用
await等待 Promise resolve，且检查响应状态：if (res.ok) { ... } - 跳转前建议加简单校验，比如检查服务端返回的 JSON 中是否有
success: true - 用
window.location.replace('/success')更干净，它不会把当前页留在历史栈里，用户点返回不会回到空表单页
const formData = new FormData(document.getElementById('upload-form'));
await fetch('/api/upload', {
method: 'POST',
body: formData
});
window.location.replace('/success');
input[type="file"] 本身不触发跳转，必须绑定到表单或手动提交
<input type="file"> 只是选择文件，它自己不会发请求。跳转依赖的是“提交动作”的发起方式。
- 如果把它放在
<form enctype="multipart/form-data"></form>里，点提交按钮就会走原生跳转 - 如果用 JS 读取
input.files[0]再丢给fetch，那就完全绕过了表单机制，跳转必须手写 - 别漏掉
enctype="multipart/form-data"—— 缺了这个，服务端收不到文件，但表单仍会跳转，造成“看似成功实则失败”的假象
服务端返回 200 但前端跳转失败？先看控制台有没有 uncaught error
最常被忽略的一点：JS 跳转代码如果写在 catch 块外、又没包在 try/catch 里，一旦前面出错（比如 formData.append 异常、fetch 被 CORS 拦截），后续跳转语句根本不会执行。
- 打开浏览器开发者工具的 Console 面板，上传后看有没有红色报错
- fetch 失败时，
catch里也要有兜底处理，比如提示错误 + 停止跳转：catch(err) { alert('上传失败：' + err.message); return; } - 不要依赖
finally跳转——它会在成功和失败后都执行，失败后跳转会造成误导
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
