HTML5如何处理上传失败重试_HTML5上传失败重试机制【应对】

XMLHttpRequest重试应基于onloadend事件和status≥500判断,而非仅依赖status===0或statusText==="";fetch重试需捕获AbortError、检查response.ok,并结合指数退避与最大重试次数。

上传失败时 XMLHttpRequest 的重试判断依据是什么

不能只看 status === 0statusText === "" 就重试——这可能是用户断网、跨域拦截、CORS 预检失败,也可能是服务端根本没收到请求。真正可重试的失败,必须满足:请求已发出、服务端有响应(哪怕 5xx)、且错误非客户端逻辑错误(如文件过大、类型不符)。XMLHttpRequestonerror 事件无法区分网络中断和 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 在后台标签页中会冻结 fetchXMLHttpRequest,导致超时后重试直接失败,且不触发 AbortError。此时仅靠前端无法恢复,必须配合服务端断点续传能力。实际做法是:

  • 首次上传前先发一个 HEAD 请求,获取服务端是否已存在该文件(通过文件名 + 时间戳或 ETag)
  • 上传采用分片(blob.slice()),每片携带序号和总片数,失败后只重传当前片
  • 禁用自动重试,改由用户点击「继续上传」

    触发,避免在不可控状态下盲目重发

没有服务端配合的纯前端重试,在 iOS Safari 上大概率只是把失败日志多打几遍。