From 7a178d7e92712fcc06217c269358e93526ec6b1c Mon Sep 17 00:00:00 2001 From: Cano1997 <58964671+Cano1997@users.noreply.github.com> Date: Tue, 16 Sep 2025 20:30:58 +0800 Subject: [PATCH] =?UTF-8?q?feat=20=20=E6=96=B0=E5=A2=9E=E6=98=AF=E5=90=A6?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0loading=E5=85=A8=E5=B1=80=E5=8F=82=E6=95=B0sh?= =?UTF-8?q?owUploadLoading=E9=85=8D=E7=BD=AE,=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=9B=BE=E7=89=87=E5=8E=8B=E7=BC=A9=E8=8C=83?= =?UTF-8?q?=E5=9B=B4=E7=BC=96=E8=BE=91=E5=99=A8=E5=8F=82=E6=95=B0imgcompre?= =?UTF-8?q?sslimit=E4=B8=8E=E5=85=A8=E5=B1=80=E5=8F=82=E6=95=B0ibiz.config?= =?UTF-8?q?.imgCompressConfig.limit,=20=E6=96=B0=E5=A2=9E=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=9B=BE=E7=89=87=E5=8E=8B=E7=BC=A9=E8=B4=A8=E9=87=8F?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E5=8F=82=E6=95=B0imgcompressquality?= =?UTF-8?q?=E4=B8=8E=E5=85=A8=E5=B1=80=E5=8F=82=E6=95=B0ibiz.config.imgCom?= =?UTF-8?q?pressConfig.quality,=20=E6=96=B0=E5=A2=9E=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=8E=8B=E7=BC=A9=E6=9C=80=E5=A4=A7=E5=AE=BD?= =?UTF-8?q?=E5=BA=A6=E7=BC=96=E8=BE=91=E5=99=A8=E5=8F=82=E6=95=B0imgcompre?= =?UTF-8?q?ssmaxwidth=E4=B8=8E=E5=85=A8=E5=B1=80=E5=8F=82=E6=95=B0ibiz.con?= =?UTF-8?q?fig.imgCompressConfig.maxWidth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 7 ++ src/editor/upload/upload-editor.controller.ts | 61 ++++++++++++---- src/editor/upload/use/use-van-upload.ts | 69 ++++++++++++++++++- src/locale/en/index.ts | 1 + src/locale/zh-CN/index.ts | 1 + 5 files changed, 124 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 11fdba899d..2c21f36e22 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,13 @@ ## [Unreleased] +### Added + +- 新增是否显示移动端文件上传loading全局参数showUploadLoading配置 +- 新增支持图片压缩范围编辑器参数imgcompresslimit与全局参数ibiz.config.imgCompressConfig.limit +- 新增支持图片压缩质量编辑器参数imgcompressquality与全局参数ibiz.config.imgCompressConfig.quality +- 新增支持图片压缩最大宽度编辑器参数imgcompressmaxwidth与全局参数ibiz.config.imgCompressConfig.maxWidth + ## [0.7.41-alpha.14] - 2025-09-12 ### Added diff --git a/src/editor/upload/upload-editor.controller.ts b/src/editor/upload/upload-editor.controller.ts index 3d0ff4cf52..99dca45e8d 100644 --- a/src/editor/upload/upload-editor.controller.ts +++ b/src/editor/upload/upload-editor.controller.ts @@ -35,9 +35,53 @@ export class UploadEditorController extends EditorController { public exportParams?: IParams; /** - * 显示加载动画 + * @description 是否显示加载动画 + * @readonly + * @type {boolean} + * @memberof UploadEditorController + */ + get showLoading(): boolean { + if (this.editorParams.showloading) { + return Boolean(this.editorParams.showloading); + } + return ibiz.config.mob.showUploadLoading; + } + + /** + * @description 图片压缩范围（超过该范围进行压缩，单位kb） + * @readonly + * @memberof UploadEditorController + */ + get imgCompressLimit(): number { + if (this.editorParams.imgcompresslimit) { + return Number(this.editorParams.imgcompresslimit); + } + return ibiz.config.imgCompressConfig.limit; + } + + /** + * @description 图片压缩质量（0-1，为0时不压缩，默认为0） + * @readonly + * @memberof UploadEditorController */ - public showLoading: boolean = false; + get imgCompressQuality(): number { + if (this.editorParams.imgcompressquality) { + return Number(this.editorParams.imgcompressquality); + } + return ibiz.config.imgCompressConfig.quality; + } + + /** + * @description 压缩图片最大宽度，默认为1280px + * @readonly + * @memberof UploadEditorController + */ + get imgCompressMaxWidth(): number { + if (this.editorParams.imgcompressmaxwidth) { + return Number(this.editorParams.imgcompressmaxwidth); + } + return ibiz.config.imgCompressConfig.maxWidth; + } /** * 文件类型 @@ -111,14 +155,8 @@ export class UploadEditorController extends EditorController { this.multiple = false; } if (this.editorParams) { - const { - isDrag, - multiple, - accept, - uploadParams, - exportParams, - showloading, - } = this.editorParams; + const { isDrag, multiple, accept, uploadParams, exportParams } = + this.editorParams; if (isDrag) { this.isDrag = Boolean(isDrag); } @@ -128,9 +166,6 @@ export class UploadEditorController extends EditorController { if (accept) { this.accept = accept; } - if (showloading) { - this.showLoading = Boolean(showloading); - } if (uploadParams) { try { this.uploadParams = JSON.parse(uploadParams); diff --git a/src/editor/upload/use/use-van-upload.ts b/src/editor/upload/use/use-van-upload.ts index 97a1918692..59cea166bf 100644 --- a/src/editor/upload/use/use-van-upload.ts +++ b/src/editor/upload/use/use-van-upload.ts @@ -195,11 +195,76 @@ export function useVanUpload( emitValue(); }; - const uploadFile = (file: IData) => { + /** + * 图片压缩 + * @param file 原始文件 + * @param maxW 最大宽度（默认 1280） + * @param quality 压缩质量 0~1（默认 0.8） + * @returns Promise 压缩后的新文件 + */ + const compressImg = ( + file: File, + maxW = 1280, + quality = 0.8, + ): Promise => { + return new Promise((resolve, reject) => { + const img = new Image(); + img.src = URL.createObjectURL(file); + img.onerror = (e: string | Event) => reject(e); + img.onload = () => { + const { width: w, height: h } = img; + + // 等比缩放 + const scale = w > h ? maxW / w : maxW / h; + const cw = scale < 1 ? Math.round(w * scale) : w; + const ch = scale < 1 ? Math.round(h * scale) : h; + + const canvas = document.createElement('canvas'); + canvas.width = cw; + canvas.height = ch; + const ctx = canvas.getContext('2d')!; + ctx.drawImage(img, 0, 0, cw, ch); + + canvas.toBlob( + blob => { + if (!blob) return reject(); + // 把 blob 转成新 File（保留原名、类型） + const newFile = new File([blob], file.name, { + type: 'image/jpeg', + lastModified: Date.now(), + }); + resolve(newFile); + }, + 'image/jpeg', + quality, + ); + }; + }); + }; + + const uploadFile = async (file: IData) => { + const size = file.file.size; + const sizeKB = size / 1024; + let curFile = file.file; + if ( + c.imgCompressQuality && + c.imgCompressLimit && + sizeKB > c.imgCompressLimit + ) { + try { + curFile = await compressImg( + curFile, + c.imgCompressMaxWidth, + c.imgCompressQuality, + ); + } catch { + ibiz.log.error(ibiz.i18n.t('editor.upload.compressError')); + } + } // 创建一个空对象实例 const formData = new FormData(); // 调用append()方法添加数据 - formData.append('file', file.file); + formData.append('file', curFile); return new Promise((resolve, reject) => { ibiz.net .axios({ diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts index c7d3aadd8b..2f0593cb36 100644 --- a/src/locale/en/index.ts +++ b/src/locale/en/index.ts @@ -210,6 +210,7 @@ export default { exportJsonFormatErr: 'The configuration of exportparams did not follow the standard JSON format', cancelUpload: 'Cancel Upload', + compressError: 'Image compression failed', }, emojiPicker: { addEmoji: 'Add emoji', diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts index 40979e3a36..9fb6a29e38 100644 --- a/src/locale/zh-CN/index.ts +++ b/src/locale/zh-CN/index.ts @@ -188,6 +188,7 @@ export default { uploadJsonFormatErr: '配置uploadparams没有按标准JSON格式', exportJsonFormatErr: '配置exportparams没有按标准JSON格式', cancelUpload: '取消上传', + compressError: '图片压缩失败', }, emojiPicker: { addEmoji: '添加表情', -- Gitee