Explorar o código

feat(register): 在头像上传前添加图片压缩功能

添加与用户信息修改页面一致的图片压缩逻辑,限制最大尺寸为500px并转换为JPEG格式,以减少上传文件大小和提升用户体验。
张旭伟 hai 1 semana
pai
achega
c517e8f4c8
Modificáronse 1 ficheiros con 57 adicións e 5 borrados
  1. 57 5
      src/view/register/index.vue

+ 57 - 5
src/view/register/index.vue

@@ -632,13 +632,65 @@
     return true;
   };
 
-  // 上传头像方法
-  const afterRead = async (file: any) => {
-    // 创建FormData对象
-    const formData = new FormData();
-    formData.append('file', file.file);
+  // 图片压缩函数(与用户信息修改页面保持一致)
+  const compressImage = (file: File): Promise<File> => {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      const reader = new FileReader();
+      
+      reader.onload = (e: any) => {
+        img.src = e.target.result;
+        img.onload = () => {
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d');
+          
+          // 设置最大尺寸为500px(与用户信息修改页面保持一致)
+          const MAX_SIZE = 500;
+          let width = img.width;
+          let height = img.height;
+          
+          if (width > height) {
+            if (width > MAX_SIZE) {
+              height *= MAX_SIZE / width;
+              width = MAX_SIZE;
+            }
+          } else {
+            if (height > MAX_SIZE) {
+              width *= MAX_SIZE / height;
+              height = MAX_SIZE;
+            }
+          }
+          
+          canvas.width = width;
+          canvas.height = height;
+          ctx!.drawImage(img, 0, 0, width, height);
+          
+          // 转换为JPEG格式并压缩(质量0.8)
+          canvas.toBlob((blob) => {
+            if (blob) {
+              resolve(new File([blob], file.name, { type: 'image/jpeg' }));
+            } else {
+              reject(new Error('图片压缩失败'));
+            }
+          }, 'image/jpeg', 0.8);
+        };
+        img.onerror = reject;
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  };
 
+  // 上传头像方法(添加压缩处理)
+  const afterRead = async (file: any) => {
     try {
+      // 先压缩图片(与用户信息修改页面保持一致)
+      const compressedFile = await compressImage(file.file);
+      
+      // 创建FormData对象
+      const formData = new FormData();
+      formData.append('file', compressedFile);
+
       // 使用fetch上传文件
       const response = await fetch(uploadUrl, {
         method: 'POST',