从零部署到底要几步？实测 10 分钟内跑通
一个 index.html 打包全部前后端逻辑的图床源码，共享 100G 容量、单文件最大 20M，丢进浏览器就能跑。我第一次打开它的源码时愣了一下——HTML、CSS、JS 全写在一个文件里，没有 package.json，没有构建流程。如果你在找一个能当天上线的轻量图床，或者想在「搭建168」找个图床类源码做二次开发底子，这篇值得看完。
这套源码的部署路径极短，核心只有 3 步。我实际部署下来，整个过程没碰过 npm，也没装任何依赖：
- 把 index.html 上传到你的服务器或虚拟主机目录；
- 配置后端代理地址和上传口令（前端不做大小校验，20M 上限由后端控制）；
- 浏览器打开页面，点虚线框选图上传，直链立刻可用。
要注意的是，复制直链功能依赖安全上下文：https 或 localhost 环境走 navigator.clipboard，http 环境会自动回退到 execCommand 方案。我一开始在 http 测试站上复制失败，后来发现不是 bug，是回退逻辑在旧内核浏览器上偶尔不生效。建议直接上 https，一步到位。环境要求清单如下：
| 项目 | 要求 |
|---|---|
| 浏览器 | 支持 ES6、fetch、Promise 的现代浏览器（Chrome / Edge / Firefox / iOS Safari / Android Chrome） |
| 文件结构 | 单文件 index.html，无 node_modules，无构建工具 |
| 后端 | 需自备上传代理接口，控制单文件 20M 上限与 100G 总容量 |
马上能用的避坑点：上传失败时条目不会从队列消失，会留在队列里显示失败原因，修复配置后再点一次「开始上传」即可自动重试所有等待和失败的条目——不用刷新页面重来。
队列管理和预览体验：这 3 个细节比同类图床做得细
功能数量不算多，但每个都打磨到位，尤其队列状态管理。后台里我最认可的是这 3 处：
- 重复文件自动忽略：判断条件是文件名 + 大小 + 修改时间三项全同才跳过，实测选同一批图重复添加，队列里不会出现冗余条目。
- 失败可重试的队列机制：每条显示缩略图、文件名、大小、状态（等待/上传中/完成/失败）和实时进度条，上传中按钮自动禁用防重复提交。传大图断了网，回来点一下就续上重试。
- 双指缩放最高 50 倍：预览面板支持捏合缩放、拖动、双击在 1 倍和 2.5 倍间切换，桌面端用滚轮缩放。下拉手势约 90px 自动关闭面板，这个交互在手机上很顺手。
列表侧也够用：按上传时间倒序、每页 20 条分页、显示「共 N 张」，缩略图加载失败会自动回退成类型图标，不会出现裂图。点「复制」直接拿直链，点条目主体弹出底部面板可以预览、下载。
一个容易被忽略的扩展点
上传框虽然限定 accept=”image/*” 只能选图片，但预览和下载逻辑是按通用文件写的——视频、音频内嵌播放的代码已经就位。想让这套图床变成小体积媒体床，只需后端放开文件类型限制，前端几乎不用改。这也是它归类在通讯系统下还能当多媒体中转站用的原因。
适合什么人用？和常规图床源码比差在哪
判断标准很简单：要管理后台和权限体系的不适合，要「快、轻、能改」的很适合。这套源码没有用户系统、没有数据库表，所有管理逻辑都在前端列表里。适合的场景：
- 个人博客 / 文档站的配图托管，复制直链直接贴 Markdown；
- 临时共享场景，团队内部传截图、传素材，共享 100G 容量够一支小团队用很久；
- 作为二次开发底子——单文件结构意味着你可以在 30 分钟内读懂全部逻辑，改 UI 或接自己的后端接口都不用翻构建配置。
和带数据库的完整图床系统比，它牺牲了多用户隔离和标签管理，换来的是零依赖和极低的维护成本。在「搭建168」下载源码做学习或轻量项目，这个取舍是划算的。
FAQ
问：单文件上限 20M 是前端限制还是后端限制？
答：前端不校验大小，20M 上限完全由后端代理控制。超限时后端返回错误，会显示在队列条目的失败状态里。
问：上传失败后条目会丢吗？要重新选文件吗？
答：不会丢。失败条目留在队列中并显示失败原因，排查完代理地址和口令后，再点一次「开始上传」就会自动重试所有等待和失败的条目。
问：能不能传视频和音频？
答：上传入口目前只能选图片（accept=”image/*”），但预览和下载逻辑已按通用文件实现，视频、音频内嵌播放功能已就绪，后端放开类型限制即可使用。
原文参考
原标题：简约图床共享100G最大上传20M_搭建168
原文简介：
简介：
简约图床 · 介绍与用法
一、这是什么
一个单文件、零依赖的轻量图床页面：HTML + CSS + JS 全部写在一个 index.html 里，
无需构建、无需安装任何依赖，保存后用浏览器打开即用。界面为移动端优先设计，
桌面端会自动居中显示。
上传就能用，直接代码管托也行！
二、功能一览
上传：点击选择、支持多选追加、上传队列管理、实时进度条、一张一张顺序上传、
失败自动可重试、重复文件自动忽略
队列：每条显示缩略图/类型图标、文件名、大小、状态（等待上传/上传中/已完成/
上传失败）、进度条，可单条移除或一键清空
列表：按上传时间倒序，每页 20 条分页，缩略图加载失败自动回退为类型图标，
一键复制直链
底部操作面板：点击条目弹出，展示大小、类型、上传时间，支持预览、下载、复制链接
预览：图片支持双指缩放（最高 50 倍）、拖动、双击切换 1 倍/2.5 倍，
桌面端支持滚轮缩放；视频、音频内嵌播放
其他：Toast 提示、下拉手势关闭面板、点遮罩关闭、复制链接全平台兼容
三、使用方法
上传图片
点击虚线框选择图片，可多选；之后可再次点击追加。重复文件
（文件名+大小+修改时间全同）自动忽略。
点「开始上传」，队列顺序一张张上传，上传中按钮禁用防重复提交。
每条队列可点「✕」移除（上传中的不行）；「清空队列」一次性清空（上传中不行）。
失败会显示原因；再点一次「开始上
原文截图：
免责声明
⚠️ 本文仅供学习研究和技术交流，相关源码仅用于了解系统架构与部署流程，请勿用于非法用途。任何商业运营行为均与作者无关。
