Skip to content
Silubaba trade > Blog > news > VOLEMI 系统图片上传、自动压缩、多尺寸裁切、前后端展示完整解决方案

VOLEMI 系统图片上传、自动压缩、多尺寸裁切、前后端展示完整解决方案

    适配：Web 官网后台、Admin 移动端后台、产品编辑页面、前台 PC+Flutter 买家 App、Google Shopping Feed

    兼容现有架构：MySQL + Redis + FileCache、Nginx 静态资源托管、多语言产品体系

    一、整体需求梳理

    1. 后台产品新增 / 编辑页面：上传多张产品图片；编辑产品时自动加载历史已上传图片，支持勾选保留、删除、新增图片
    2. 图片上传完成后自动处理：压缩体积、生成多尺寸缩略图、统一转为 WebP（兼容原图备用）
    3. 前台产品列表、详情页、App、Google Shopping 分别调用对应尺寸图片，大图不阻塞页面加载，提升 Core Web Vitals 指标
    4. 文件统一本地服务器存储，不依赖第三方图床；JS/CSS/ 图片资源本地部署架构保持统一
    5. 支持产品主图、多图相册、详情长图区分处理规则

    二、图片标准化处理规则（后端服务统一执行）

    2.1 支持上传格式

    允许：jpg,jpeg,png

    禁止：bmp、tiff、psd 等超大格式；上传时前端先拦截校验

    2.2 上传前端预处理（浏览器先压缩，减少上行流量）

    • 前端限制单张原始文件最大：8MB
    • 浏览器端使用 Canvas 轻度压缩后再提交后端，弱网海外管理员上传更快

    2.3 后端自动生成 3 套规格（强制）

    全部自动生成，无需人工操作

    1. 原图（original） 路径：/upload/product/original/xxxx.webp 用途：后台编辑预览、客户下载高清图、Google Shopping 原始素材备用 长边限制：1920px，品质 85
    2. 列表缩略图（thumbnail） 路径：/upload/product/thumb/xxxx.webp 尺寸：400 × 400px 等比例裁切居中（产品封面正方形） 用途：官网产品列表、App 商品列表、侧边推荐商品
    3. 详情展示图（detail） 路径：/upload/product/detail/xxxx.webp 长边限制：1200px，等比例缩放，不裁切 用途：产品详情页相册、放大预览弹窗

    统一输出格式：WebP；同时保留一份 jpg 兼容降级（老旧浏览器自动 fallback）

    2.4 命名规范（防重复、方便清理缓存）

    采用 {product_id}_{uuid}_{timestamp}.webp

    避免中文、空格、特殊符号；Nginx 伪静态、CDN 缓存友好

    三、后台页面交互逻辑（产品新增 / 产品编辑）

    3.1 新增产品页面

    1. 图片上传区域：支持拖拽上传 + 点击选择文件，支持批量多选
    2. 实时预览上传队列，显示上传进度条
    3. 可拖拽排序图片顺序（排序数值存入数据库，前台按顺序展示）
    4. 标记第一张为【产品主图】，同步同步至 Google Shopping Feed

    3.2 编辑产品页面【重点需求】

    1. 进入编辑接口自动读取数据库中已绑定的图片列表
    2. 页面加载完成后渲染所有历史图片预览，显示现有图片排序
    3. 操作功能：
      • 拖拽调整已有图片顺序
      • 点击删除单张图片（标记删除，提交保存后物理清理文件）
      • 继续新增上传新图片
      • 重新指定主图
    4. 提交保存逻辑：
      • 保留图片：继续关联产品 ID
      • 删除图片：数据库解除关联；后台定时任务清理无引用孤立图片文件（防止磁盘堆积）

    3.3 数据库存储设计

    产品图片表独立数据表（不塞进 JSON 字段，方便查询、排序、清理）

    plaintext

    id
product_id          // 关联产品ID
image_sort          // 排序序号
is_main             // 是否为主图 1=是 0=否
original_path       // 原图路径
thumb_path          // 缩略图路径
detail_path         // 详情图路径
created_at
updated_at

    四、前台展示调用规范（Web + Flutter App）

    1. 产品列表页面：统一加载 thumb 400×400 缩略图，开启图片懒加载
    2. 产品详情相册：加载 detail 1200 图；点击弹窗放大展示 original
    3. Flutter 买家 App 完全复用同一套图片地址，自动适配手机屏幕
    4. Google Shopping Feed 读取主图 original_path，满足平台白底高清图片要求
    5. HTML 图片标签统一写入 alt="{产品名称 多语言}"，对 SEO 友好

    五、Nginx 静态资源优化配置（配套方案）

    nginx

    location ~* ^/upload/product/ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000";
    try_files $uri $uri.jpg;
}
    • 长缓存头，减少重复请求
    • WebP 优先识别，浏览器不支持自动访问 jpg 备用图

    六、缓存联动策略（配合 Redis + FileCache）

    1. 产品数据缓存（Redis）中同步存储图片路径数组
    2. 更新 / 删除产品图片 → 主动清除该产品 Redis 缓存与 FileCache
    3. 避免前台读取旧缓存展示失效图片

    七、定时维护任务（可选，运维优化）

    1. 每日凌晨执行：扫描图片目录，删除数据库无关联的孤立图片，释放服务器磁盘
    2. 定期校验图片文件完整性，失效图片在前台自动隐藏

    八、异常容错机制

    1. 图片文件损坏、路径 404：前台展示默认产品占位图
    2. 上传超时、服务器繁忙：前端提示重试，不阻塞整个产品表单
    3. 批量上传失败支持断点续传简易方案

    九、开发任务清单

    • 前端上传组件：拖拽、多选、进度展示、排序、主图标记
    • 编辑页面接口：读取历史图片并渲染预览
    • 后端图片处理服务：自动压缩、生成三套尺寸、转 WebP
    • 产品图片数据表设计
    • 保存逻辑：新增 / 编辑图片关联、软删除标记
    • 前台页面改造：列表调用 thumb、详情调用 detail、懒加载
    • Flutter App 图片地址适配、图片缓存策略
    • Nginx 静态资源缓存配置
    • 定时清理孤立图片脚本
    • Google Shopping Feed 对接主图路径

    如果你需要，我可以输出：

    1. 图片上传接口标准 API 文档
    2. 产品编辑页面前端交互流程图
    3. PHP / 后端图片处理伪代码示例

    Leave a Reply