HTML5如何处理上传失败重试_HTML5上传失败重试机制【应对】
XMLHttpRequest重试应基于onloadend事件和status≥500判断，而非仅依赖status===0或statusText===""；fetch重试需捕获AbortError、检查response.ok，并结合指数退避与最大重试次数。
上传失败时 XMLHttpRequest 的重试判断依据是什么
不能只看 status === 0 或 statusText === "" 就重试——这可能是用户断网、跨域拦截、CORS 预检失败，也可能是服务端根本没收到请求。真正可重试的失败，必须满足：请求已发出、服务端有响应（哪怕 5xx）、且错误非客户端逻辑错误（如文件过大、类型不符）。XMLHttpRequest 的 onerror 事件无法区分网络中断和 CORS 拒绝，而 onloadend + status >= 500 才是较可靠的重试信号。
用 fetch 实现带退避策略的重试
fetch 默认不 reject 网络错误（如断连），需手动检查 response.ok 和捕获 AbortError；同时要避免无限重试或雪崩式并发。建议封装一个带指数退避和最大重试次数的函数：
function uploadWithRetry(file, url, options = {}) {
const { maxRetries = 3, baseDelay = 1000 } = options;
const upload = async (retryCount = 0) => {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 30000);
try {
const formData = new FormData();
formData.append('file', file);
const res = await fetch(url, {
method: 'POST',
body: formData,
signal: controller.signal
});
clearTimeout(timeoutId);
if (res.ok) return res;
if (res.status >= 500 && retryCount < maxRetries) {
const delay = baseDelay * Math.pow(2, retryCount) + Math.random() * 100;
await new Promise(r => setTimeout(r, delay));
return upload(retryCount + 1);
}
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
} catch (err) {
clearTimeout(timeoutId);
if (err.name === 'AbortError' && retryCount < maxRetries) {
const delay = baseDelay * Math.pow(2, retryCount) + Math.random() * 100;
await new Promise(r => setTimeout(r, delay));
return upload(retryCount + 1);
}
throw err;
}};
return upload();
}
重试时如何避免重复上传同一文件
前端重试本身不产生重复文件，但若服务端未做幂等处理（如未校验 Content-MD5 或请求唯一 ID），多次重试可能写入多份。解决方式分两端：
- 前端：在
FormData中附加唯一请求标识，如formData.append('request_id', crypto.randomUUID())（注意兼容性，可用Date.now() + Math.random()降级） - 服务端：必须基于该
request_id或文件哈希做去重判断，否则前端重试毫无意义 - 切勿在重试时重新读取
file.arrayBuffer()——大文件反复读取会阻塞主线程，应提前缓存或使用ReadableStream分块上传
移动端 Safari 对重试的特殊限制
iOS 15+ 的 Safari 在后台标签页中会冻结 fetch 和 XMLHttpRequest，导致超时后重试直接失败，且不触发 AbortError。此时仅靠前端无法恢复，必须配合服务端断点续传能力。实际做法是：
- 首次上传前先发一个
HEAD请求，获取服务端是否已存在该文件（通过文件名 + 时间戳或
ETag）
- 上传采用分片（
blob.slice()），每片携带序号和总片数，失败后只重传当前片 - 禁用自动重试，改由用户点击「继续上传」触发，避免在不可控状态下盲目重发
没有服务端配合的纯前端重试，在 iOS Safari 上大概率只是把失败日志多打几遍。
