From 4de35fca9c33c817c844306b534f3d5f3715ce26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com>
Date: Fri, 25 Apr 2025 09:01:51 +0800
Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E9=BB=98=E8=AE=A4=E5=8E=8B?=
 =?UTF-8?q?=E7=BC=A9=E9=80=89=E6=8B=A9=E7=9A=84=E8=8A=82=E7=82=B9=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/ImgUpload/index.vue | 15 ++++----
 web/src/utils/index.js                 | 48 +++++++++++++++++++++++++-
 2 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/web/src/components/ImgUpload/index.vue b/web/src/components/ImgUpload/index.vue
index dad7e718..58d59990 100644
--- a/web/src/components/ImgUpload/index.vue
+++ b/web/src/components/ImgUpload/index.vue
@@ -29,6 +29,8 @@
 </template>
 
 <script>
+import { compressImage } from '@/utils'
+
 export default {
   model: {
     prop: 'value',
@@ -60,12 +62,12 @@ export default {
     },
 
     // 选择图片
-    selectImg(file) {
-      this.file = file
-      let fr = new FileReader()
-      fr.readAsDataURL(file)
-      fr.onload = e => {
-        this.$emit('change', e.target.result)
+    async selectImg(file) {
+      try {
+        const result = await compressImage(file)
+        this.$emit('change', result)
+      } catch (error) {
+        this.$message.error(error)
       }
     },
 
@@ -92,7 +94,6 @@ export default {
     // 删除图片
     deleteImg() {
       this.$emit('change', '')
-      this.file = null
     }
   }
 }
diff --git a/web/src/utils/index.js b/web/src/utils/index.js
index 486f9852..fe1e6780 100644
--- a/web/src/utils/index.js
+++ b/web/src/utils/index.js
@@ -92,4 +92,50 @@ export const getParentWithClass = (el, className) => {
     return getParentWithClass(el.parentNode, className)
   }
   return null
-}
\ No newline at end of file
+}
+
+// 压缩图片
+export const compressImage = (file, options = {}) => {
+  return new Promise((resolve, reject) => {
+    const fileType = file.type
+    let {
+      maxWidth = 1200,
+      maxHeight = 1200,
+      quality = 0.8,
+      mimeType = ''
+    } = options
+    const reader = new FileReader()
+    reader.onload = event => {
+      // 不处理gif格式
+      if (/\/gif$/.test(fileType)) {
+        return resolve(event.target.result)
+      }
+      mimeType = mimeType || fileType
+      const img = new Image()
+      img.onload = () => {
+        // 计算新尺寸，保持宽高比
+        let width = img.width
+        let height = img.height
+        if (width > maxWidth || height > maxHeight) {
+          const ratio = Math.min(maxWidth / width, maxHeight / height)
+          width = Math.floor(width * ratio)
+          height = Math.floor(height * ratio)
+        }
+        const canvas = document.createElement('canvas')
+        canvas.width = width
+        canvas.height = height
+        const ctx = canvas.getContext('2d')
+        ctx.drawImage(img, 0, 0, width, height)
+        resolve(canvas.toDataURL(mimeType, quality))
+      }
+      img.onerror = function() {
+        reject(new Error('图片加载失败'))
+      }
+      img.src = event.target.result
+    }
+    reader.onerror = function() {
+      reject(new Error('文件读取失败'))
+    }
+    reader.readAsDataURL(file)
+  })
+}