图片上传-尺寸提示

src/utils/get-img-width.js

@@ -43,17 +43,18 @@ export default function (file, id) {
                 // console.log(id, width, height);
                 if (width && height) {
                     if (img.width === width && img.height === height) {
-                        resolve(true)
+                        resolve({ validation: true })
                     } else {
                         Message({
-                            message: `图片上传失败,宽高错误`,
+                            message: `图片上传失败,宽高错误。正确尺寸${width}x${height}`,
                             type: "warning",
                             duration: 5000
                         });
-                        resolve(false);
+                        let res = { width, height, validation: false }
+                        resolve(res);
                     }
                 } else {
-                    resolve(true)
+                    resolve({ validation: true })
                 }
             };
         };

src/views/ad/index.vue

@@ -151,6 +151,12 @@
             >
               <i class="el-icon-plus" />
             </el-upload>
+            <div
+              v-if="validation === false"
+              style="padding-left: 10px; color: red"
+            >
+              提示：宽高{{ dislabelSize.width }}x{{ dislabelSize.height }}
+            </div>
           </el-form-item>
         </el-form>
         <div class="drawer__footer">
@@ -214,7 +220,10 @@ export default {
       downloadLoading: false,
       searchArticleLoading: false,
       articles: [],
+      // 图片是否上传
       validation: true,
+      // 正确图片宽高
+      dislabelSize: {},
     };
   },
   created() {
@@ -230,13 +239,21 @@ export default {
       return "";
     },
   },
+  watch: {
+    dialogFormVisible(newVal) {
+      if (newVal === false) {
+        this.validation = true;
+      }
+    },
+  },
   methods: {
     // 验证图片宽高
     async validationImages(file) {
       let desc = this.temp.static === 1 ? "bigSwiper" : "smallSwiper";
       let res = await this.$getImgWidth(file, desc);
-      this.validation = res;
-      return res;
+      this.validation = res.validation;
+      this.dislabelSize = res;
+      return res.validation;
     },
     getList() {
       this.listLoading = true;

src/views/article/index.vue

@@ -274,6 +274,12 @@
             >
               <i class="el-icon-plus" />
             </el-upload>
+            <div
+              v-if="validation === false"
+              style="padding-left: 10px; color: red"
+            >
+              提示：宽高{{ dislabelSize.width }}x{{ dislabelSize.height }}
+            </div>
           </el-form-item>
           <el-form-item prop="file" label="上传脚本">
             <el-upload
@@ -402,7 +408,9 @@ export default {
       // tagData:[],
       chooseTagData: [],
       // 是否允许上传
-      validation: false,
+      validation: true,
+      // 正确的图片宽高
+      dislabelSize: {},
     };
   },
   mounted() {
@@ -425,6 +433,11 @@ export default {
     },
   },
   watch: {
+    dialogFormVisible(newVal) {
+      if (newVal === false) {
+        this.validation = true;
+      }
+    },
     tagData(newVal) {
       console.log("tagDAta");
       console.log(newVal);
@@ -480,8 +493,9 @@ export default {
     // 验证图片宽高
     async validationImages(file) {
       let res = await this.$getImgWidth(file, this.temp.category_id);
-      this.validation = res;
-      return res;
+      this.validation = res.validation;
+      this.dislabelSize = res;
+      return res.validation;
     },
     // 节点单击事件
     handleNodeClick(data) {