XMLHttpRequest.abort()是取消上传的唯一可靠方式；它能立即终止请求、触发onabort事件并重置readyState为0，而fetch()即使配合AbortController也无法撤回已发出的上传体。
XMLHttpRequest.abort() 是取消上传的唯一可靠方式
HTML5 本身没有提供“取消上传”的原生 API，XMLHttpRequest 的 abort() 方法是当前最通用、兼容性最好且真正能中断底层传输的手段。它会立即终止请求，触发 onabort 事件，并将 readyState 设为 0。注意：fetch() 不支持中止上传（即使传入 AbortController，也仅对响应阶段有效，上传体已发出后无法撤回）。
用 XMLHttpRequest 实现可取消的文件上传
关键在于：必须在调用 send() 前保存实例引用，并确保上传过程中用户能触发 abort()。常见疏漏是把 xhr 声明在函数作用域内，导致取消按钮无法访问。
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('file', fileInput.files[0]);
xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
console.log(`上传进度: ${e.loaded}/${e.total}`);
}
});
xhr.addEventListener('load', () => {
console.log('上传完成');
});
xhr.addEventListener('error', () => {
console.log('上传失败');
});
xhr.addEventListener('abort', () => {
console.log('上传已取消');
});
// 开始上传
xhr.open('POST', '/upload');
xhr.send(formData);
// 取消按钮点击时调用
document.getElementById('cancelBtn').addEventListener('click', () => {
if (xhr.readyState > 0 && xhr.readyState < 4) {
xhr.abort();
}
});
使用 AbortController 时要注意 fetch 的局限性
AbortController 对 fetch() 的上传取消效果有限——它只能中止“等待响应”阶段，一旦浏览器已将文件数据发向服务器（尤其大文件），abort() 不会撤回已发送的字节。服务端仍可能继续处理甚至保存不完整文件。因此生产环境若需强取消语义，应优先选 XMLHttpRequest。
-
fetch()+AbortController适合小文件或仅需 UI 层“假装取消” - 服务端必须配合实现上传中断检测（如检查连接是否关闭），否则无实际意义
- Chrome 120+ 对
fetch上传中止有小幅改进，但仍未达XMLHttpRequest.abort()级别
上传中取消后服务端可能仍在写入
前端调用 abort() 或 abortController.abort() 只影响客户端连接状态，不通知服务端“停止处理”。如果后端使用 Node.js 的 multer、PHP 的 $_FILES 或 Python 的 Flask.request.files，它们通常会在请求结束时才清理临时文件；而某些框架（如 Express 默认）甚至会等整个请求体接收完毕才进入路由逻辑——这意味着你点了取消，服务端可能还在收包。
立即学习“前端免费学习笔记（深入）”；
真正健壮的做法是：
- 前端用
XMLHttpRequest并监听onabort - 服务端在接收流时定期检查
req.socket.destroyed（Node.js）或connection_aborted()（PHP） - 上传接口返回唯一
uploadId，前端取消时再发一个DELETE /uploads/{id}清理
XMLHttpRequest + 显式 abort()，再配上服务端的连接状态校验。 
