feat：图片压缩

src/views/infra/file/FileForm.vue

@@ -1,21 +1,9 @@
 <template>
   <Dialog v-model="dialogVisible" title="上传文件">
-    <el-upload
-      ref="uploadRef"
-      v-model:file-list="fileList"
-      :action="uploadUrl"
-      :auto-upload="false"
-      :data="data"
-      :disabled="formLoading"
-      :limit="1"
-      :on-change="handleFileChange"
-      :on-error="submitFormError"
-      :on-exceed="handleExceed"
-      :on-success="submitFormSuccess"
-      :http-request="httpRequest"
-      accept=".jpg, .png, .gif"
-      drag
-    >
+    <el-upload ref="uploadRef" v-model:file-list="fileList" :action="uploadUrl" :auto-upload="false"
+      :before-upload="beforeUpload" :data="data" :disabled="formLoading" :limit="1" :on-change="handleFileChange"
+      :on-error="submitFormError" :on-exceed="handleExceed" :on-success="submitFormSuccess" :http-request="httpRequest"
+      accept=".jpg, .png, .gif" drag>
       <i class="el-icon-upload"></i>
       <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em></div>
       <template #tip>
@@ -31,7 +19,8 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-import { useUpload } from '@/components/UploadFile/src/useUpload'
+import { useUpload, compressImage } from '@/components/UploadFile/src/useUpload'
+import type { UploadProps, UploadRawFile } from 'element-plus'
 
 defineOptions({ name: 'InfraFileForm' })
 
@@ -53,6 +42,25 @@ const open = async () => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
+/** 文件上传之前进行压缩 */
+const beforeUpload: UploadProps['beforeUpload'] = async (file: UploadRawFile) => {
+  // 验证文件类型
+  const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
+  if (!allowedTypes.includes(file.type)) {
+    message.error('仅允许上传 jpg、png、gif 格式文件！')
+    return false
+  }
+
+  // 压缩图片
+  try {
+    const compressed = await compressImage(file, 0.8)
+    return compressed
+  } catch (error) {
+    message.warning('图片压缩失败，将使用原图上传')
+    return file
+  }
+}
+
 /** 处理上传的文件发生变化 */
 const handleFileChange = (file) => {
   data.value.path = file.name