5.3 KiB

Raw Permalink Blame History

商品图片压缩功能使用说明

功能概述

一键压缩数据库全部商品图片功能，可以批量压缩所有商品的封面图，提高页面加载速度，减少服务器存储空间。

文件结构

src/
├── utils/
│   ├── imageCompressor.ts          # 基础图片压缩工具
│   └── goodsImageCompressor.ts     # 商品图片压缩服务
├── api/shop/
│   └── goods.ts                    # 商品API（已添加获取所有商品方法）
└── views/shop/goods/
    └── index.vue                   # 商品管理页面（已添加压缩按钮和功能）

功能特性

1. 批量获取商品

自动分页获取所有商品数据
每页获取100条记录
智能判断数据是否获取完成

2. 智能压缩

支持自定义压缩质量（高质量/中等质量/高压缩）
可配置最大宽度和高度（默认980x980）
仅压缩图片文件，非图片文件自动跳过
压缩失败时使用原文件

3. 实时进度显示

显示总商品数、当前处理进度
显示成功数、失败数、跳过数
实时进度条和状态提示
每个商品的处理状态实时反馈

4. 自动上传更新

压缩后自动上传到服务器
自动更新商品信息的封面图URL
保留原图片作为备份

使用方法

在商品管理页面操作

进入 店铺管理 > 商品管理 页面
点击顶部工具栏的 "一键压缩图片" 按钮
确认操作提示（注意：此操作可能需要较长时间）
等待压缩完成，查看进度和结果

压缩配置

默认压缩配置：

质量：中等质量（0.8）
最大宽度：980像素
最大高度：980像素

如需修改配置，可编辑 src/views/shop/goods/index.vue 中的 handleCompressAllImages 函数：

const results = await compressAllGoodsImages({
  quality: ImageQuality.HIGH,  // 可选：HIGH | MEDIUM | LOW
  maxWidth: 1280,              // 可自定义最大宽度
  maxHeight: 1280,             // 可自定义最大高度
  onProgress: (progress) => {
    compressProgress.value = progress;
  }
});

质量级别说明

级别	值	适用场景
高质量	0.9	产品图、头像等需要高清晰度的图片
中等质量	0.8	一般场景（推荐）
高压缩	0.6	缩略图、证明材料等

进度信息说明

总商品数：需要处理的商品总数（有封面图）
当前处理：正在处理第几个商品
成功：压缩并更新成功的商品数
失败：压缩或上传失败的商品数
跳过：没有封面图或无需处理的商品数

注意事项

⚠️ 重要提示

备份建议：操作前建议先备份商品数据和图片文件
网络要求：确保网络稳定，压缩过程需要多次上传
时间预估：根据商品数量，可能需要几分钟到几十分钟
权限要求：需要 shop:goods:write 权限才能执行压缩

处理逻辑

扫描所有商品，筛选出有封面图的商品
逐个下载商品封面图
压缩图片（质量、尺寸调整）
上传压缩后的图片到服务器
更新商品信息中的封面图URL
记录处理结果和错误信息

错误处理

单个商品压缩失败不会影响其他商品
失败信息会实时显示在控制台
可以在浏览器开发者工具中查看详细错误
支持断点续传（刷新页面后可重新执行）

开发者指南

自定义压缩参数

编辑 src/utils/goodsImageCompressor.ts 文件中的 compressGoodsImage 函数，可以自定义更多压缩选项：

const { file: compressedFile, compressed } = await compressImageSafe(file, {
  quality: 0.8,              // 压缩质量 0-1
  maxWidth: 980,             // 最大宽度
  maxHeight: 980,            // 最大高度
  resize: 'cover',           // 调整大小模式
  crop: false,               // 是否裁剪
  rotate: 0,                 // 旋转角度
  blur: 0,                   // 模糊半径
  grayscale: false,          // 是否转为灰度图
  output: 'blob'             // 输出类型
});

调试模式

压缩过程中的详细信息会输出到浏览器控制台，包括：

商品处理进度
成功/失败的商品列表
错误详情和原因
压缩前后的文件大小对比

扩展功能

可以基于此功能扩展以下功能：

批量压缩商品详情页图片
添加图片格式转换（如转为WebP）
添加图片水印功能
添加压缩前后对比功能

故障排除

常见问题

Q: 压缩过程中出现网络错误怎么办？ A: 单个图片失败不会影响整体流程，可以重新点击按钮对失败的商品进行二次压缩。

Q: 压缩后图片模糊怎么办？ A: 调整压缩质量为 ImageQuality.HIGH，或增大 maxWidth/maxHeight 参数。

Q: 可以压缩指定分类的商品吗？ A: 目前是压缩所有商品，如需指定分类，可以修改 getAllGoods 函数添加分类过滤条件。

Q: 压缩后的图片存储在哪里？ A: 压缩后的图片通过 /file/upload 接口上传到服务器，存储路径由后端配置决定。

更新日志

v1.0.0

初始版本
支持一键压缩所有商品图片
实时进度显示
自动上传和更新功能
错误处理和重试机制

5.3 KiB Raw Permalink Blame History Unescape Escape