174 lines
5.3 KiB
Markdown
174 lines
5.3 KiB
Markdown
# 商品图片压缩功能使用说明
|
||
|
||
## 功能概述
|
||
|
||
一键压缩数据库全部商品图片功能，可以批量压缩所有商品的封面图，提高页面加载速度，减少服务器存储空间。
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
src/
|
||
├── utils/
|
||
│ ├── imageCompressor.ts # 基础图片压缩工具
|
||
│ └── goodsImageCompressor.ts # 商品图片压缩服务
|
||
├── api/shop/
|
||
│ └── goods.ts # 商品API（已添加获取所有商品方法）
|
||
└── views/shop/goods/
|
||
└── index.vue # 商品管理页面（已添加压缩按钮和功能）
|
||
```
|
||
|
||
## 功能特性
|
||
|
||
### 1. 批量获取商品
|
||
- 自动分页获取所有商品数据
|
||
- 每页获取100条记录
|
||
- 智能判断数据是否获取完成
|
||
|
||
### 2. 智能压缩
|
||
- 支持自定义压缩质量（高质量/中等质量/高压缩）
|
||
- 可配置最大宽度和高度（默认980x980）
|
||
- 仅压缩图片文件，非图片文件自动跳过
|
||
- 压缩失败时使用原文件
|
||
|
||
### 3. 实时进度显示
|
||
- 显示总商品数、当前处理进度
|
||
- 显示成功数、失败数、跳过数
|
||
- 实时进度条和状态提示
|
||
- 每个商品的处理状态实时反馈
|
||
|
||
### 4. 自动上传更新
|
||
- 压缩后自动上传到服务器
|
||
- 自动更新商品信息的封面图URL
|
||
- 保留原图片作为备份
|
||
|
||
## 使用方法
|
||
|
||
### 在商品管理页面操作
|
||
|
||
1. 进入 **店铺管理 > 商品管理** 页面
|
||
2. 点击顶部工具栏的 **"一键压缩图片"** 按钮
|
||
3. 确认操作提示（注意：此操作可能需要较长时间）
|
||
4. 等待压缩完成，查看进度和结果
|
||
|
||
### 压缩配置
|
||
|
||
默认压缩配置：
|
||
- 质量：中等质量（0.8）
|
||
- 最大宽度：980像素
|
||
- 最大高度：980像素
|
||
|
||
如需修改配置，可编辑 `src/views/shop/goods/index.vue` 中的 `handleCompressAllImages` 函数：
|
||
|
||
```typescript
|
||
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 | 缩略图、证明材料等 |
|
||
|
||
## 进度信息说明
|
||
|
||
- **总商品数**：需要处理的商品总数（有封面图）
|
||
- **当前处理**：正在处理第几个商品
|
||
- **成功**：压缩并更新成功的商品数
|
||
- **失败**：压缩或上传失败的商品数
|
||
- **跳过**：没有封面图或无需处理的商品数
|
||
|
||
## 注意事项
|
||
|
||
### ⚠️ 重要提示
|
||
|
||
1. **备份建议**：操作前建议先备份商品数据和图片文件
|
||
2. **网络要求**：确保网络稳定，压缩过程需要多次上传
|
||
3. **时间预估**：根据商品数量，可能需要几分钟到几十分钟
|
||
4. **权限要求**：需要 `shop:goods:write` 权限才能执行压缩
|
||
|
||
### 处理逻辑
|
||
|
||
1. 扫描所有商品，筛选出有封面图的商品
|
||
2. 逐个下载商品封面图
|
||
3. 压缩图片（质量、尺寸调整）
|
||
4. 上传压缩后的图片到服务器
|
||
5. 更新商品信息中的封面图URL
|
||
6. 记录处理结果和错误信息
|
||
|
||
### 错误处理
|
||
|
||
- 单个商品压缩失败不会影响其他商品
|
||
- 失败信息会实时显示在控制台
|
||
- 可以在浏览器开发者工具中查看详细错误
|
||
- 支持断点续传（刷新页面后可重新执行）
|
||
|
||
## 开发者指南
|
||
|
||
### 自定义压缩参数
|
||
|
||
编辑 `src/utils/goodsImageCompressor.ts` 文件中的 `compressGoodsImage` 函数，可以自定义更多压缩选项：
|
||
|
||
```typescript
|
||
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' // 输出类型
|
||
});
|
||
```
|
||
|
||
### 调试模式
|
||
|
||
压缩过程中的详细信息会输出到浏览器控制台，包括：
|
||
- 商品处理进度
|
||
- 成功/失败的商品列表
|
||
- 错误详情和原因
|
||
- 压缩前后的文件大小对比
|
||
|
||
### 扩展功能
|
||
|
||
可以基于此功能扩展以下功能：
|
||
1. 批量压缩商品详情页图片
|
||
2. 添加图片格式转换（如转为WebP）
|
||
3. 添加图片水印功能
|
||
4. 添加压缩前后对比功能
|
||
|
||
## 故障排除
|
||
|
||
### 常见问题
|
||
|
||
**Q: 压缩过程中出现网络错误怎么办？**
|
||
A: 单个图片失败不会影响整体流程，可以重新点击按钮对失败的商品进行二次压缩。
|
||
|
||
**Q: 压缩后图片模糊怎么办？**
|
||
A: 调整压缩质量为 `ImageQuality.HIGH`，或增大 `maxWidth/maxHeight` 参数。
|
||
|
||
**Q: 可以压缩指定分类的商品吗？**
|
||
A: 目前是压缩所有商品，如需指定分类，可以修改 `getAllGoods` 函数添加分类过滤条件。
|
||
|
||
**Q: 压缩后的图片存储在哪里？**
|
||
A: 压缩后的图片通过 `/file/upload` 接口上传到服务器，存储路径由后端配置决定。
|
||
|
||
## 更新日志
|
||
|
||
### v1.0.0
|
||
- 初始版本
|
||
- 支持一键压缩所有商品图片
|
||
- 实时进度显示
|
||
- 自动上传和更新功能
|
||
- 错误处理和重试机制
|