【Lsky Pro】图床-图片上传助手使用教程

背景介绍

• 在文档、博客和产品开发中，图片托管与引用是一项高频需求。将图片稳定地上传到图床并生成多种引用格式（Markdown/HTML/BBCode/URL），能显著提升协作与发布效率。
• 本项目提供一个 Chrome 扩展，直接在浏览器中完成上传与复制，避免频繁切换应用或手动拼接链接，适合开发者与内容创作者的日常工作流。

详细的功能说明

• 上传入口：
  • 选择文件：在弹窗底部点击“选择图片”
  • 拖拽上传：将图片拖拽到弹窗内提示区域
  • 粘贴上传：从剪贴板粘贴图片到弹窗
• 输出格式：
  • 上方“格式选择器”切换统一输出格式（URL/Markdown/HTML/BBCode/缩略图）
  • 点选结果项中的链接文本框即可复制
• 历史记录：
  • 本地保存最近上传结果（最多 100 条），支持搜索与清空
• 批量复制：
  • 弹窗底部“批量复制”按钮复制当前列表所有链接
• 稳定性与性能：
  • 失败自动重试：指数退避（可配置基础间隔与最大次数）
  • 并发队列：可配置最大并发数，降低触发限流（429）
  • 请求超时：超过阈值自动取消，避免长时间等待
  • 限流提示：显示剩余配额（X-RateLimit-Remaining/X-RateLimit-Limit）

代码参考：

• 弹窗逻辑：[/js/popup.js]
• 设置页面：[/js/options.js]
• 样式文件：[/css/main.css]

分步骤的使用指南

1. 安装扩展

1. 打开 chrome://extensions
2. 开启“开发者模式”
3. 点击“加载已解压的扩展程序”，选择目录 lsky-api-chrome

2. 配置图床

1. 点击扩展图标 → 进入“图床设置”页面
2. 填写：
   • 图床地址（如 https://lenghang.com）
   • API 令牌（后台个人中心获取，填写时无需带 Bearer 前缀）
   • 默认输出格式（URL/Markdown/HTML/BBCode/缩略图）
   • 上传策略 ID（可选）
   • 自动重试次数、重试基础间隔
   • 最大上传文件大小、最大并发上传数、请求超时
3. 点击“保存设置”，随后点击“测试连接”验证令牌与接口可用性

3. 上传图片并复制链接

1. 打开弹窗
2. 选择或拖拽/粘贴图片
3. 在顶部选择需要的输出格式
4. 点击结果中的链接文本框复制，或使用“批量复制”复制当前列表所有链接

4. 查看历史记录

1. 点击弹窗底部“历史记录”
2. 使用搜索框快速过滤记录
3. 需要时点击“清空记录”

实际操作截图

以下为示例展示：

• “格式选择器”与上传结果列表
• 底部操作按钮纵向排布（图标在上、文字在下）
• 设置页面（放宽宽度，92vw，上限 1400px）

可在本地运行后自行截取并替换文档中的截图，建议存放到 docs/images 目录并以相对路径引用。

示例：

常见问题解答

• Q：测试连接失败，返回 401/403？
  • A：检查令牌是否失效或权限不足；确保请求头包含 Authorization: Bearer <token> 与 Accept: application/json
• Q：频繁出现 429 限流？
  • A：在设置中调低“最大并发上传数”，或提高“重试基础间隔”；注意服务器侧的分钟配额（响应头含 X-RateLimit-*）
• Q：上传中断或卡住？
  • A：增加“请求超时”阈值；网络状况不佳时可减小并发与调高重试间隔
• Q：复制结果粘贴后无换行？
  • A：批量复制输出已改为 \n 换行；若依旧无换行，请确认粘贴目标是否支持多行文本
• Q：删除历史中的图片无效？
  • A：删除依赖服务端提供的删除 URL，并会携带鉴权；若服务端未提供可删除链接，则仅移除本地记录

最佳实践建议

• 使用 HTTPS 图床地址，保障传输安全
• 在设置页完成“测试连接”，确认令牌与接口可用性
• 合理设置并发（2–4）与重试策略，减少触发限流
• 控制本地最大文件大小（如 10–20MB），避免上传失败
• 通过统一格式输出，提高跨平台引用的一致性
• 关注响应头的配额提示，避免高频刷新导致 429

相关资源链接

• 接口文档：兰空图床API
• 项目文件：
  • 弹窗页面与逻辑：[/popup.html]、[/js/popup.js]
  • 设置页面与逻辑：[/options.html]、[/js/options.js]
  • 样式文件：[/css/main.css]
  • 扩展清单：[/manifest.json]

实用技巧与注意事项

• 复制链接时点击文本框即可复制，失败会提示并可手动选中复制
• 历史记录默认限制 100 条，长期使用建议不时清理
• 并发上传时底部按钮会显示“上传中(N)”，等待全部任务完成后恢复
• 若后端返回 413/415，请确认文件大小与媒体类型是否符合要求
• 令牌格式校验：^[A-Za-z0-9._|:-]{10,200}$（设置页已内置校验）

---

附：核心接口示例

POST {domain}/api/v1/upload
Headers:
  Authorization: Bearer <token>
  Accept: application/json
Body:
  multipart/form-data
    file: <image>
    strategy_id: <optional>

// 获取限流配额提示
const limit = response.headers.get('X-RateLimit-Limit');
const remaining = response.headers.get('X-RateLimit-Remaining');
if (limit && remaining) showToast(`剩余请求配额 ${remaining}/${limit}`);