feat(store): 添加商品图片及轮播图上传功能
- 商品编辑弹窗新增商品主图上传和更换功能,支持上传进度反馈 - 实现轮播图(files字段)上传、删除和显示,支持多格式files解析 - 编辑提交时携带图片和轮播图数据进行保存 - 新增图片压缩工具函数getCompressedImageUrl,用于生成缩略图压缩URL - 统一修正上传接口URL,确保图片上传服务可用
This commit is contained in:
65
src/utils/image.ts
Normal file
65
src/utils/image.ts
Normal 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}`;
|
||||
}
|
||||
Reference in New Issue
Block a user