上传套餐包封面图处理

src/views/store/package/index.vue

@@ -178,8 +178,13 @@
           <el-input v-model="form.secondName" placeholder="请输入套餐包别名" />
         </el-form-item>
         <el-form-item label="封面图" prop="imgUrl">
-          <el-upload v-model="form.imgUrl" class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
-            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+          <el-upload
+            v-model="form.imgUrl"
+            class="avatar-uploader"
+            :action="uploadUrl"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload">
             <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="300px">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
@@ -473,6 +478,7 @@ import Editor from '@/components/Editor/wang';
 import Material from '@/components/Material';
 import { listStore } from "@/api/store/storeProduct";
 import { getAllCateList } from "@/api/store/packageCate";
+import { Loading } from 'element-ui';
 export default {
   name: "Package",
   components: { packageDetails, Editor, productAttrValueSelect, Material },
@@ -680,37 +686,37 @@ export default {
       }
     },
     beforeAvatarUpload(file) {
-      return new Promise((resolve, reject) => {
-        if (file.size / 1024 / 1024 > 3) {
-          this.$message.error('上传的图片不能超过3MB');
-          reject();
-          return;
-        }
-        if (file.size / 1024 > 500) {
-          const loadingInstance = Loading.service({ text: '图片内存过大正在压缩图片...' });
-          // 文件大于1MB时进行压缩
-          this.compressImage(file).then((compressedFile) => {
-            loadingInstance.close();
-            if (compressedFile.size / 1024 > 500) {
-              this.$message.error('图片压缩后仍大于500KB');
-              reject();
-            } else {
-              // this.$message.success(`图片压缩成功，最终质量为: ${this.finalQuality.toFixed(2)}`);
-              console.log(`图片压缩成功，最终质量为: ${this.finalQuality.toFixed(2)}`);
-              console.log(`最终内存大小为: ${(compressedFile.size / 1024).toFixed(2)}KB`);
-              resolve(compressedFile);
-            }
-          }).catch((err) => {
-            loadingInstance.close();
-            console.error(err);
+        return new Promise((resolve, reject) => {
+          if (file.size / 1024 / 1024 > 3) {
+            this.$message.error('上传的图片不能超过3MB');
             reject();
-          });
-        } else {
-          resolve(file);
-        }
-      });
-    },
-    compressImage(file) {
+            return;
+          }
+          if (file.size / 1024 > 500) {
+            const loadingInstance = Loading.service({ text: '图片内存过大正在压缩图片...' });
+            // 文件大于1MB时进行压缩
+            this.compressImage(file).then((compressedFile) => {
+              loadingInstance.close();
+              if (compressedFile.size / 1024 > 500) {
+                this.$message.error('图片压缩后仍大于500KB');
+                reject();
+              } else {
+                // this.$message.success(`图片压缩成功，最终质量为: ${this.finalQuality.toFixed(2)}`);
+                console.log(`图片压缩成功，最终质量为: ${this.finalQuality.toFixed(2)}`);
+                console.log(`最终内存大小为: ${(compressedFile.size/1024).toFixed(2)}KB`);
+                resolve(compressedFile);
+              }
+            }).catch((err) => {
+              loadingInstance.close();
+              console.error(err);
+              reject();
+            });
+          } else {
+            resolve(file);
+          }
+        });
+      },
+      compressImage(file) {
       return new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.readAsDataURL(file);