如何取消正在上传的文件请求
使用 abortcontroller 的 signal 属性传递给 fetch 或 xmlhttprequest，并调用其 abort() 方法来中断请求。对于文件上传，需要在发起请求时绑定信号，并在需要取消时触发该信号，此时浏览器会立即终止网络传输并抛出错误。
Fetch API 中取消文件上传的具体实现
在 fetch 中通过 signal 选项关联控制器，上传大文件时可以通过监听进度或按钮点击来调用 abort。该方法会直接切断连接，释放内存，但不会自动清理已发送的部分数据块，需由应用层处理后续逻辑。
const controller = new AbortController();
const signal = controller.signal;
const formData = new FormData();
formData.append('file', fileInput.files[0]);
fetch('/upload', {
method: 'POST',
body: formData,
signal: signal
})
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('Upload cancelled');
} else {
console.error('Upload failed:', err);
}
});
// 模拟取消操作
setTimeout(() => controller.abort(), 5000);
XMLHttpRequest 方式取消上传及状态处理
XMLHttpRequest 提供了更细粒度的控制，通过 abort() 方法同样可以中断上传。与 fetch 不同，XHR 允许在上传过程中监听 progress 事件，并在取消时获取已上传的字节数，适合需要显示进度条的场景。
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log(`Uploaded ${percent.toFixed(2)}%`);
}
};
xhr.send(formData);
// 模拟取消操作
setTimeout(() => xhr.abort(), 5000);
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
