JavaScript 怎么在接口请求中处理文件上传的取消与重新开始-js教程-PHP中文网

javascript文件上传取消与重新开始的核心是用xmlhttprequest（支持abort和进度）或abortcontroller（fetch取消，但无进度），断点续传需分片+服务端配合，封装任务对象可提升控制力。

javascript 怎么在接口请求中处理文件上传的取消与重新开始

JavaScript 中处理文件上传的取消与重新开始，核心在于使用 XMLHttpRequest 或 fetch 配合 AbortController，并合理管理上传状态。原生 fetch 不支持上传进度监听，而 XMLHttpRequest 支持进度事件且可中止；现代方案则常结合 AbortController（用于取消）与分片/断点续传逻辑（用于重新开始）。

用 XMLHttpRequest 实现上传取消

XMLHttpRequest 提供 abort() 方法，能立即终止正在进行的上传请求：

创建实例后，保存引用以便后续调用 abort()
绑定 upload.onprogress 监听上传进度
点击“取消”按钮时调用 xhr.abort()，触发 onabort 事件
注意：abort() 后该实例不可复用，需新建一个用于重试

示例片段：

let xhr = null;
<p>function startUpload(file) {
xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');</p><p>xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log(<code>上传中: ${percent.toFixed(1)}%</code>);
}
};</p><p>xhr.onload = () => {
if (xhr.status >= 200 && xhr.status </p><p>xhr.onerror = () => console.error('上传失败');
xhr.onabort = () => console.log('上传已取消');</p><p>const formData = new FormData();
formData.append('file', file);
xhr.send(formData);
}</p><p>function cancelUpload() {
if (xhr && xhr.readyState !== XMLHttpRequest.DONE) {
xhr.abort();
}
}</p>

用 AbortController 取消 fetch 上传（有限支持）

fetch 支持 signal 参数实现取消，但仅对整个请求生效——无法中断上传体发送过程本身（浏览器底层限制），只能中止请求等待和响应解析。因此它适合取消“未发出”或“刚发出尚无数据上传”的请求，不适用于大文件上传中途精确取消。

创建 AbortController，传入 signal 到 fetch
调用 controller.abort() 触发 AbortError
注意：fetch 不提供上传进度，如需进度需配合 ReadableStream 分块读取 + 自定义上传（复杂度高）

简例：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

let controller = null;
<p>function startFetchUpload(file) {
controller = new AbortController();</p><p>const formData = new FormData();
formData.append('file', file);</p><p>fetch('/upload', {
method: 'POST',
body: formData,
signal: controller.signal
})
.then(r => r.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('上传被用户取消');
} else {
console.error('上传出错:', err);
}
});
}</p><p>function cancelFetchUpload() {
if (controller) controller.abort();
}</p>