图片限制500k

.env.production

@@ -2,5 +2,5 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = 'http://lsytest.rocpool.top/api.php'
+VUE_APP_BASE_API = '/api'
 

src/utils/get-img-width.js

@@ -48,9 +48,18 @@ export default function (file, id) {
             let img = document.createElement("img");
             img.src = txt;
             img.onload = function () {
-                // console.log(id, width, height);
+                // 限制图片上传大小
+                if (parseInt(file.size / 1024) > 500) {
+                    resolve({ validation: false, msg: `图片限制500kb以内` });
+                    Message({
+                        type: 'warning',
+                        message: '图片限制500kb以内'
+                    });
+                    return;
+                }
+                // 限制图片宽高
                 if (width && height) {
-                    if (img.width === width && img.height === height) {
+                    if ((img.width === width && img.height === height) || (img.width === width * 2 && img.height === height * 2) || (img.width === width * 3 && img.height === height * 3)) {
                         resolve({ validation: true })
                     } else {
                         Message({
@@ -58,7 +67,7 @@ export default function (file, id) {
                             type: "warning",
                             duration: 5000
                         });
-                        let res = { width, height, validation: false }
+                        let res = { msg: `提示：基础宽高${width}x${height}`, validation: false }
                         resolve(res);
                     }
                 } else {

src/views/ad/index.vue

@@ -155,7 +155,7 @@
               v-if="validation === false"
               style="padding-left: 10px; color: red"
             >
-              提示：宽高{{ dislabelSize.width }}x{{ dislabelSize.height }}
+              {{ dislabelSize.msg }}
             </div>
           </el-form-item>
         </el-form>

src/views/article/index.vue

@@ -293,7 +293,7 @@
               v-if="validation === false"
               style="padding-left: 10px; color: red"
             >
-              提示：宽高{{ dislabelSize.width }}x{{ dislabelSize.height }}
+              {{ dislabelSize.msg }}
             </div>
           </el-form-item>
           <el-form-item prop="file" label="上传脚本">

src/views/article/subject/index.vue

@@ -142,6 +142,12 @@
             >
               <i class="el-icon-plus" />
             </el-upload>
+            <div
+              v-if="validation === false"
+              style="padding-left: 10px; color: red"
+            >
+              {{ dislabel_cover.msg }}
+            </div>
           </el-form-item>
 
           <el-form-item label="banner" prop="image" required>
@@ -163,6 +169,12 @@
             >
               <i class="el-icon-plus" />
             </el-upload>
+            <div
+              v-if="validation_banner === false"
+              style="padding-left: 10px; color: red"
+            >
+              {{ dislabel_banner.msg }}
+            </div>
           </el-form-item>
         </el-form>
         <div class="drawer__footer">
@@ -222,22 +234,36 @@ export default {
       searchArticleLoading: false,
       articles: [],
       validation: true,
+      validation_banner: true,
+      dislabel_banner: {},
+      dislabel_cover: {},
     };
   },
   created() {
     this.getList();
   },
+  watch: {
+    dialogFormVisible(newVal) {
+      if (newVal === false) {
+        this.validation = true;
+        this.validation_banner = true;
+      }
+    },
+  },
   methods: {
     // 验证图片宽高
     async validationImg(file) {
       let res = await this.$getImgWidth(file, "subjectCover");
-      this.validation = res;
-      return res;
+      this.validation = res.validation;
+      console.log(res);
+      this.dislabel_cover = res;
+      return res.validation;
     },
     async validationImages(file) {
       let res = await this.$getImgWidth(file, "subjectBanner");
-      this.validation = res;
-      return res;
+      this.validation_banner = res.validation;
+      this.dislabel_banner = res;
+      return res.validation;
     },
     getList() {
       this.listLoading = true;
@@ -361,7 +387,7 @@ export default {
       }
     },
     uploadSuccess(response, file) {
-      if (this.validation && response.state == "SUCCESS") {
+      if (this.validation_banner && response.state == "SUCCESS") {
         this.temp.image = response.url;
       }
     },