feat(store): 添加商品图片及轮播图上传功能

- 商品编辑弹窗新增商品主图上传和更换功能,支持上传进度反馈
- 实现轮播图(files字段)上传、删除和显示,支持多格式files解析
- 编辑提交时携带图片和轮播图数据进行保存
- 新增图片压缩工具函数getCompressedImageUrl,用于生成缩略图压缩URL
- 统一修正上传接口URL,确保图片上传服务可用
This commit is contained in:
2026-07-06 11:55:31 +08:00
parent 433afb8070
commit c3dd04fa03
4 changed files with 204 additions and 11 deletions

65
src/utils/image.ts Normal file
View File

@@ -0,0 +1,65 @@
/**
* 图片压缩参数配置
*/
export interface ImageCompressOptions {
/** 图片宽度px默认 750 */
width?: number;
/** 图片质量 0-100默认 90 */
quality?: number;
/** 是否启用压缩,默认 true */
enabled?: boolean;
}
/**
* 默认压缩参数
*/
const DEFAULT_OPTIONS: Required<ImageCompressOptions> = {
width: 750,
quality: 90,
enabled: true,
};
/**
* 获取 OSS 压缩后的图片 URL
*
* 默认给图片 URL 拼接阿里云 OSS 图片处理参数,实现等比缩放 + 质量压缩。
* 使用场景:商品列表、商品卡片等缩略图展示。
*
* 注意:预览原图时(如 Taro.previewImage不需要调用此函数直接用原始 URL 即可。
*
* @param url 原始图片 URL
* @param options 压缩选项
* @returns 处理后的图片 URL
*
* @example
* // 默认压缩宽750质量90
* getCompressedImageUrl('https://oss.wsdns.cn/xxx.jpg')
* // => 'https://oss.wsdns.cn/xxx.jpg?x-oss-process=image/resize,w_750/quality,Q_90'
*
* @example
* // 自定义尺寸和质量
* getCompressedImageUrl('https://oss.wsdns.cn/xxx.jpg', { width: 400, quality: 80 })
* // => 'https://oss.wsdns.cn/xxx.jpg?x-oss-process=image/resize,w_400/quality,Q_80'
*
* @example
* // 关闭压缩
* getCompressedImageUrl('https://oss.wsdns.cn/xxx.jpg', { enabled: false })
* // => 'https://oss.wsdns.cn/xxx.jpg'
*/
export function getCompressedImageUrl(url: string, options?: ImageCompressOptions): string {
// 空 URL 直接返回空字符串
if (!url) return '';
const { width, quality, enabled } = { ...DEFAULT_OPTIONS, ...options };
// 未启用压缩,原样返回
if (!enabled) return url;
// 已包含 OSS 处理参数,避免重复拼接
if (url.includes('x-oss-process')) return url;
// 已有其他 query 参数用 & 拼接,否则用 ?
const separator = url.includes('?') ? '&' : '?';
return `${url}${separator}x-oss-process=image/resize,w_${width}/quality,Q_${quality}`;
}