HTML5上传失败如何重新尝试？

本文深入剖析了HTML5文件上传失败后的智能重试策略，指出盲目依赖status===0或空statusText会导致对断网、CORS拦截等不可重试场景的误判；强调应以onloadend事件结合status≥500（服务端错误）或AbortError（可控中断）作为可靠重试信号，并详解了基于fetch封装的指数退避重试函数——兼顾超时控制、并发抑制与错误分类；同时警示前端重试必须与服务端幂等设计（如request_id或文件哈希校验）协同，尤其针对iOS Safari后台冻结限制，提出分片上传、HEAD预检和用户主动触发等务实方案，真正让重试“有据可依、进退有度、端云一体”。

上传失败时 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 上大概率只是把失败日志多打几遍。

好了，本文到此结束，带大家了解了《HTML5上传失败如何重新尝试？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！