- Vercel Free Plan 限制:单张图片超过 4.5MB 将无法上传。
- 自动转化 WebP:
- 上传超过 4.4MB 的图片将自动转为 WebP 格式;若仍超出,将进行强制压缩,最终失败时会报错。
- 若不希望转化为 WebP,可手动开启压缩功能自行处理;手动压缩后仍超出 4.4MB 的图片将判定为上传失败。
- 10 秒限制:单次上传时间限制为 10 秒。
- 上传文件过多或网络延迟可能导致失败,并弹出
uploadserror
提示。 - 此问题由 Vercel 限制引起,失败文件可根据提示重新上传。
- 上传文件过多或网络延迟可能导致失败,并弹出
- 上传调用 Vercel 后端 API,图片加载通过客户端直接访问存储桶(如 R2),无需担忧流量超限。
- 模糊预览与加载优化:
- 图片加载时优先显示
thumbs
文件夹中的预览图(最大尺寸为 200px,WebP 格式);若无预览图,则加载原图。 - 上传时可直接预览原图,避免加载原图导致的缓存压力。
- 图片加载时优先显示
- 后缀名一致:开启 WebP 转化后,文件后缀名保持与源图片一致,但 MIME 格式为 WebP,这是故意为之,避免同名不同格式的重复上传。
- 自动添加序号:重复上传的文件会在文件名后添加序号(如
logo_1.png
、logo_2.png
)。
- 单用户设计:仅适用于个人使用,不支持多用户场景。若需多用户支持,可在 Vercel 上重复部署。
- 收藏功能:
- 收藏的图片在存储桶中生成标记文件(不占用空间)。
- 管理页面提供“展示收藏图片”开关(默认关闭),便于查看和删除收藏图片。
- 上传与下载:
- 不支持批量下载,仅可通过直链单独下载图片;批量下载建议使用 Alist。
- 无数据库依赖:图片数据通过 CDN 转链,存储于 S3。即使页面失效,图片仍可正常访问。
- 文件安全性:环境变量存储在 Vercel,数据需经过授权才可访问。图片 CDN 与页面地址独立,链接可自由分享。
-
图床响应速度:上传或删除图片后需重新获取元数据,受限于 Vercel 和 S3,已尽可能优化响应速度。
-
压缩率配置
:默认压缩率为 0.85,WebP 优化率为 0.9,代码位置:
components/ImageUploader.tsx
- 第 50 行调整压缩率
- 第 74 行调整 WebP 优化率
-
登录页面背景:可自定义背景图片,路径:
/app/login/page.tsx
第 18 行。 默认背景const [bgImage, setBgImage] = useState<string | null>('null')
自定义背景
const [bgImage, setBgImage] = useState<string | null>('https://example.com/background.png')
- 收藏功能设计:
- 管理页面仅提供 “收藏”和“删除” 功能,默认隐藏收藏图片。使用showlikes开关会显示收藏图片,界面设计突出了其样式,提醒用户避免误操作。
- 取消收藏需在“收藏页面”完成,通过多步操作确认关键操作。
- 上传后的收藏:上传图片后可直接点击“收藏”标记,若后悔可立即取消收藏,符合用户使用逻辑。