图片上传失败后自动重试的核心是构建可重试任务单元、失败后暂存队列、按需触发重试、执行时保障幂等性与DOM同步，并全程管理任务生命周期。
富文本编辑器中图片上传失败后自动重试，核心是把失败的上传任务存入队列，并在条件满足（如网络恢复、手动触发、定时轮询）时重新执行。关键在于任务状态管理、错误隔离、重试策略和与编辑器 DOM 的同步。
1. 构建可重试的上传任务单元
每个图片上传应封装为一个独立、可序列化、带元信息的任务对象，便于存储、重试和 UI 反馈：
- 包含原始文件或 base64 数据：避免重试时再次读取 input 或 canvas（推荐暂存 blob URL 或 File 对象引用，若需持久化则转为 base64 或用 IndexedDB 存二进制）
-
携带编辑器节点定位信息：如插入位置的
editor.getSelection().anchorNode或自定义 data-id，确保重试成功后能准确替换占位符 img 标签 -
记录重试次数和最大限制：例如
retryCount: 0, maxRetries: 3，防止无限循环 -
保存上传前生成的临时占位符：比如插入一个带
data-upload-pending="true"和唯一data-task-id的 img 标签，失败时保留它，成功后替换 src 并移除属性
2. 失败捕获 + 队列暂存（内存 or 持久化）
在上传 Promise reject 后，不直接报错，而是将任务推入重试队列：
-
内存队列适用场景：单页应用、短时离线、用户不刷新页面。可用
const retryQueue = []管理，配合Array.prototype.unshift()（优先重试最新失败项）或push()（FIFO） -
需要持久化时：使用
localStorage存 JSON 序列化任务（注意 base64 过大会超限），或更可靠地用IndexedDB存文件 blob + 元数据；重试前从存储恢复队列 -
拦截并标记失败图片：找到对应占位符 img，添加
data-upload-error="true"和错误提示 title，UI 上可显示「⚠️ 上传失败，点击重试」
3. 触发重试的几种实用方式
不依赖固定时间轮询，按需响应更友好：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
-
监听网络状态变化：用
window.addEventListener('online', () => startRetry())，适合离线后恢复场景 -
用户主动点击重试：为每个失败图片绑定 click 事件，调用
retryTask(taskId)单独重试，或全局「重试全部」按钮 -
定时轻量探测 + 智能延迟：对队列中任务设置指数退避（如第 1 次 1s 后、第 2 次 3s 后、第 3 次 7s 后），用
setTimeout调度，避免并发冲击服务端 -
编辑器空闲时自动重试：监听
editor.on('blur')或setTimeout(() => { if (isIdle) startRetry() }, 2000)，减少干扰用户输入
4. 重试执行与结果同步
重试不是简单再发请求，需保障幂等性和 DOM 一致性：
- 上传前校验任务有效性：检查文件是否仍存在（File 对象可能因页面刷新失效）、占位符 DOM 是否还在、编辑器是否已销毁
- 使用相同签名防重复提交：对文件内容计算简易 hash（如 size + lastModified），或服务端支持 idempotency-key，避免同一图被传多次
-
成功后精准更新 DOM：根据 task 中保存的
data-task-id找到对应 img，替换src，移除data-upload-pending和data-upload-error，可加淡入动画 - 最终失败要降级处理：如重试 3 次均失败，提示用户「图片上传失败，请检查网络或更换图片」，并提供删除占位符按钮
不复杂但容易忽略的是任务生命周期管理——上传开始时加 loading 状态、失败后进队列、重试中禁用重复点击、成功后清理内存和 DOM 标记。把每次上传看作一个有始有终的“事务”，队列就自然健壮了。
