图片宽高验证

src/layout/components/Navbar.vue

@@ -1,8 +1,6 @@
 <template>
   <el-menu class="navbar-header-fixed" mode="horizontal">
-    <div class="name">
-      Hamlet管理端
-    </div>
+    <div class="name">Hamlet管理端</div>
     <div class="top-right">
       <div class="hb-bd">
         <hamburger
@@ -14,9 +12,10 @@
 
       <div class="top-select">
         <div class="go-index">{{ name }}</div>
-        <div class="logout" v-if="this.$store.state.user.token" @click="logout">注销</div>
+        <div class="logout" v-if="this.$store.state.user.token" @click="logout">
+          注销
+        </div>
         <div class="login" v-else @click="$router.push('/login')">登录</div>
-        
       </div>
     </div>
   </el-menu>
@@ -27,38 +26,37 @@ import { mapGetters } from "vuex";
 import Hamburger from "@/components/Hamburger";
 export default {
   components: {
-    Hamburger
+    Hamburger,
   },
   data: () => ({
     mix: false,
     userImage: require("@/assets/user.png"),
-    isMac: process.platform === "darwin"
+    isMac: process.platform === "darwin",
   }),
-  mounted() {
-  },
+  mounted() {},
   methods: {
     toggleSideBar() {
-      console.log('toggle')
+      console.log("toggle");
       this.$store.dispatch("ToggleSideBar");
     },
     logout() {
       this.$store.dispatch("user/FedLogOut").then(() => {
         this.$message({
           message: "退出成功",
-          type: "success"
+          type: "success",
         });
-        this.$router.push('/login')
+        this.$router.push("/login");
       });
     },
   },
   computed: {
-    ...mapGetters(["name", "role", "sidebar"])
+    ...mapGetters(["name", "role", "sidebar"]),
   },
   beforeDestroy() {
     console.log("销毁计时器------------");
     clearInterval(this.timer);
     this.timer = null;
-  }
+  },
 };
 </script>
 
@@ -72,7 +70,7 @@ export default {
   right: 0;
   z-index: 1002;
   height: 36px;
-  -webkit-user-select:none;
+  -webkit-user-select: none;
   -webkit-app-region: drag;
   background-color: #525151;
   border: none !important;
@@ -101,7 +99,7 @@ export default {
     height: 100%;
     justify-content: space-between;
     // padding: 0 5px;
-    color: #BFBDBD;
+    color: #bfbdbd;
     .hb-bd {
       display: flex;
       justify-content: center;
@@ -137,7 +135,7 @@ export default {
         font-family: SourceHanSansSC-regular;
       }
       .tools {
-        color: #BFBDBD;
+        color: #bfbdbd;
         margin-left: 32px;
         padding: 0 8px;
         display: flex;
@@ -147,7 +145,6 @@ export default {
           margin: 0 5px;
           cursor: pointer;
         }
-        
       }
       .select-right ::v-deep .el-dropdown > span {
         font-size: 6px;

src/main.js

@@ -22,6 +22,10 @@ import VueI18n from 'vue-i18n'
 import loadLanguage from './i18n'
 const languages = loadLanguage()
 
+// 获取图片大小
+import getImgWidth from './utils/get-img-width';
+Vue.prototype.$getImgWidth = getImgWidth;
+
 // console.log(process.env.VUE_APP_NAME);
 
 // 创建 i18n

src/utils/get-img-width.js

@@ -0,0 +1,29 @@
+import { Message } from 'element-ui'
+export default function (file, width, height) {
+    return new Promise(resolve => {
+        let reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = function (e) {
+            let txt = e.target.result;
+            let img = document.createElement("img");
+            img.src = txt;
+            img.onload = function () {
+                if (img.width === width && img.height === height) {
+                    resolve(true)
+                } else {
+                    Message({
+                        message: `图片上传失败,宽高错误`,
+                        type: "warning",
+                        duration: 5000
+                    });
+                    resolve(false);
+                }
+            };
+        };
+    })
+}
+// 1. 650   350
+// 1. 650   350
+// 1. 650   350
+// 1. 650   350
+// 1. 650   350

src/views/article/index.vue

@@ -29,7 +29,12 @@
         </el-col>
         <!--用户数据-->
         <el-col :span="20" :xs="24">
-          <el-form ref="queryForm" :model="listQuery" :inline="true" label-width="68px">
+          <el-form
+            ref="queryForm"
+            :model="listQuery"
+            :inline="true"
+            label-width="68px"
+          >
             <el-form-item label="文章标题" prop="title">
               <el-input
                 v-model="listQuery.title"
@@ -67,7 +72,13 @@
               </el-select>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="getList"
+                >搜索</el-button
+              >
             </el-form-item>
           </el-form>
           <el-row :gutter="10" class="mb8">
@@ -77,7 +88,8 @@
                 icon="el-icon-plus"
                 size="mini"
                 @click="handleCreate"
-                >新增</el-button>
+                >新增</el-button
+              >
             </el-col>
           </el-row>
           <el-table
@@ -86,57 +98,63 @@
             border
             fit
             highlight-current-row
-            style="width: 100%;"
+            style="width: 100%"
           >
             <el-table-column label="ID" prop="id" align="center">
-              <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <span>{{ row.article_id }}</span>
               </template>
             </el-table-column>
             <el-table-column label="分类" align="center">
-              <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <span>{{ row.category_id | getCateName(categoriesJson) }}</span>
               </template>
             </el-table-column>
             <el-table-column label="标题" align="center">
-              <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <span>{{ row.title }}</span>
               </template>
             </el-table-column>
             <el-table-column label="封面图" align="center">
-              <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <img :src="row.img" height="100" />
               </template>
             </el-table-column>
             <el-table-column label="外链" align="center">
-              <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <span>{{ row.url }}</span>
               </template>
             </el-table-column>
             <el-table-column label="标签详情">
-              <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <span>{{ row.label_name | getTagDetail }}</span>
               </template>
             </el-table-column>
             <el-table-column label="创建时间" align="center">
-              <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <span>{{ row.create_time }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <el-table-column
+              label="操作"
+              align="center"
+              class-name="small-padding fixed-width"
+            >
               <template slot-scope="scope">
                 <el-button
                   size="mini"
                   type="text"
                   icon="el-icon-edit"
                   @click="handleUpdate(scope.row)"
-                >修改</el-button>
+                  >修改</el-button
+                >
                 <el-button
                   size="mini"
                   type="text"
                   icon="el-icon-delete"
                   @click="handleDelete(scope.row)"
-                >删除</el-button>
+                  >删除</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -161,7 +179,13 @@
       size="950px"
     >
       <div class="demo-drawer__content" v-if="dialogFormVisible">
-        <el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style>
+        <el-form
+          ref="dataForm"
+          :model="temp"
+          label-position="left"
+          label-width="70px"
+          style
+        >
           <el-form-item label="类型">
             <treeselect
               v-model="temp.category_id"
@@ -172,12 +196,16 @@
             />
           </el-form-item>
           <template v-if="tagData.length">
-            <el-form-item :label="item.label" v-for="(item, index) in tagData" :key="index">
+            <el-form-item
+              :label="item.label"
+              v-for="(item, index) in tagData"
+              :key="index"
+            >
               <el-select
                 v-model="chooseTagData[index]"
                 multiple
                 placeholder="请选择"
-                style="width:100%"
+                style="width: 100%"
               >
                 <el-option
                   v-for="(sItem, sIndex) in item.value"
@@ -210,16 +238,17 @@
               v-if="temp.img"
               :src="temp.img"
               class="el-upload el-upload--picture-card"
-              style="float:left"
+              style="float: left"
             />
             <el-upload
               ref="sys_app_logo"
               :on-success="uploadSuccess"
               :on-error="uploadError"
               :action="uploadAction"
-              style="float:left"
+              style="float: left"
               list-type="picture-card"
               :show-file-list="false"
+              :before-upload="validationImages"
             >
               <i class="el-icon-plus" />
             </el-upload>
@@ -266,28 +295,34 @@
 </template>
 
 <script>
-import { validPhone, isEmpty } from '@/utils/validate'
-import { fetchList, createArticle, updateArticle, delArticle, fetchArticleDetails } from '@/api/article'
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
-import VueUeditorWrap from "vue-ueditor-wrap"
-import { listCategory } from '@/api/category'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { validPhone, isEmpty } from "@/utils/validate";
+import {
+  fetchList,
+  createArticle,
+  updateArticle,
+  delArticle,
+  fetchArticleDetails,
+} from "@/api/article";
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+import VueUeditorWrap from "vue-ueditor-wrap";
+import { listCategory } from "@/api/category";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
-  name: 'articleIndex',
+  name: "articleIndex",
   components: { Pagination, Treeselect, VueUeditorWrap },
   data() {
     return {
-      deptName: '',
+      deptName: "",
       defaultProps: {
-        children: 'children',
-        label: 'category_name'
+        children: "children",
+        label: "category_name",
       },
       // 状态数据字典
       statusOptions: [
-        {value: 2, label: '上线'},
-        {value: 1, label: '下线'}
+        { value: 2, label: "上线" },
+        { value: 1, label: "下线" },
       ],
       categoryOptionsLeft: undefined,
       tableKey: 0,
@@ -298,9 +333,9 @@ export default {
         page: 1,
         limit: 20,
         is_offline: 2,
-        title: '',
-        label_name: '',
-        category_id: undefined
+        title: "",
+        label_name: "",
+        category_id: undefined,
       },
       // accountRules: {
       //   phone: [{ required: true, trigger: 'blur', validator: RulePhone }],
@@ -310,62 +345,66 @@ export default {
         UEDITOR_HOME_URL: "/UEditor/",
         serverUrl: process.env.VUE_APP_BASE_API + "/files/baiduUp",
         initialFrameHeight: 300,
-        scaleEnabled: true
+        scaleEnabled: true,
       },
-      uploadAction: process.env.VUE_APP_BASE_API + '/files/uploadFile',
+      uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile",
       temp: {
         id: undefined,
         category_id: undefined,
-        title: '',
-        time: '',
-        img: '',
-        script_url: '',
-        content: '',
-        description: '',
-        video_time: ''
+        title: "",
+        time: "",
+        img: "",
+        script_url: "",
+        content: "",
+        description: "",
+        video_time: "",
       },
       dialogFullscreen: true,
       dialogFormVisible: false,
-      dialogStatus: '',
+      dialogStatus: "",
       textMap: {
-        update: 'Edit',
-        create: 'Create'
+        update: "Edit",
+        create: "Create",
       },
       rules: {
-        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
+        title: [
+          { required: true, message: "title is required", trigger: "blur" },
+        ],
       },
       categoryOptions: [],
       // categoriesJson:[],
       downloadLoading: false,
       // tagData:[],
-      chooseTagData: []
-    }
+      chooseTagData: [],
+      // 是否允许上传
+      validation: false,
+    };
   },
   mounted() {
-    this.getList()
-    this.getTreeselect()
+    this.getList();
+    this.getTreeselect();
   },
   computed: {
     categoriesJson() {
-      var res = this.handleCategory(this.categoryOptions)
-      return res
+      var res = this.handleCategory(this.categoryOptions);
+      return res;
     },
     tagData() {
-      let matchData = null
-      this.categoriesJson.forEach(item => {
+      let matchData = null;
+      this.categoriesJson.forEach((item) => {
         if (item.id == this.temp.category_id) {
-          matchData = item.label_name
+          matchData = item.label_name;
         }
-      })
+      });
       return matchData ? JSON.parse(matchData) : [];
-    }
+    },
   },
   watch: {
     tagData(newVal) {
       console.log("tagDAta");
       console.log(newVal);
       if (!newVal.length) {
-        this.chooseTagData = []
+        this.chooseTagData = [];
       }
     },
     chooseTagData(newVal) {
@@ -374,180 +413,213 @@ export default {
     },
     // 根据名称筛选部门树
     deptName(val) {
-      this.$refs.tree.filter(val)
-    }
+      this.$refs.tree.filter(val);
+    },
   },
   filters: {
     getCateName(id, categoriesJson) {
       for (var i = 0; i < categoriesJson.length; i++) {
         if (id == categoriesJson[i].id) {
-          return categoriesJson[i].name
+          return categoriesJson[i].name;
         }
       }
     },
     getTagDetail(data) {
       if (!data) {
-        return
+        return;
       }
-      let str = ''
+      let str = "";
       data = JSON.parse(data);
-      data.forEach(item => {
+      data.forEach((item) => {
         if (item.value.length) {
-          str += `${item.label}：${item.value.join("、")}；`
+          str += `${item.label}：${item.value.join("、")}；`;
         }
-      })
-      return str
+      });
+      return str;
     },
   },
   methods: {
+    // 验证图片宽高
+    async validationImages(file) {
+      let width = 0;
+      let height = 0;
+      console.log(this.temp);
+      switch (this.temp.category_id) {
+        case 23: //深度解说
+          width = 650;
+          height = 350;
+          break;
+        case 25: //行情分析
+          width = 130;
+          height = 130;
+          break;
+        case 24: //热点追踪
+          width = 130;
+          height = 130;
+          break;
+        case 7: //基础教程
+          width = 380;
+          height = 220;
+          break;
+        case 6: //图文教程
+          width = 380;
+          height = 220;
+          break;
+      }
+      let res = await this.$getImgWidth(file, width, height);
+      this.validation = res;
+      return res;
+    },
     // 节点单击事件
     handleNodeClick(data) {
-      this.listQuery.category_id = data.id
-      this.getList()
+      this.listQuery.category_id = data.id;
+      this.getList();
     },
     handleCategory(array) {
-      var res = []
+      var res = [];
       array.forEach((item, index) => {
-        let obj = {}
-        obj.id = item.category_id
-        obj.name = item.category_name
-        obj.label_name = item.label_name
-        res.push(obj)
+        let obj = {};
+        obj.id = item.category_id;
+        obj.name = item.category_name;
+        obj.label_name = item.label_name;
+        res.push(obj);
         if (item.children) {
-          res.push(...this.handleCategory(item.children))
+          res.push(...this.handleCategory(item.children));
         }
-      })
-      return res
+      });
+      return res;
     },
-// 筛选节点
+    // 筛选节点
     filterNode(value, data) {
-      if (!value) return true
-      return data.category_name.indexOf(value) !== -1
+      if (!value) return true;
+      return data.category_name.indexOf(value) !== -1;
     },
     getList() {
-      this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.list
-        this.total = response.data.count
-
+      this.listLoading = true;
+      fetchList(this.listQuery).then((response) => {
+        console.log(response);
+        this.list = response.data.list;
+        this.total = response.data.count;
         // Just to simulate the time of the request
         setTimeout(() => {
-          this.listLoading = false
-        }, 1.5 * 1000)
-      })
+          this.listLoading = false;
+        }, 1.5 * 1000);
+      });
     },
     handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
+      this.listQuery.page = 1;
+      this.getList();
     },
     handleModifyStatus(row, status) {
       this.$message({
-        message: '操作Success',
-        type: 'success'
-      })
-      row.status = status
+        message: "操作Success",
+        type: "success",
+      });
+      row.status = status;
     },
     resetTemp() {
       this.temp = {
         id: undefined,
         category_id: undefined,
-        title: '',
-        time: '',
-        img: '',
-        script_url: '',
-        content: '',
-        description: '',
-        video_time: ''
-      }
+        title: "",
+        time: "",
+        img: "",
+        script_url: "",
+        content: "",
+        description: "",
+        video_time: "",
+      };
     },
     submitForm() {
-      let matchData = [...this.tagData]
+      let matchData = [...this.tagData];
       this.chooseTagData.forEach((item, index) => {
-        matchData[index]['value'] = item
-      })
+        matchData[index]["value"] = item;
+      });
       this.temp.label_name = JSON.stringify(matchData);
-      if (this.dialogStatus == 'create') {
-        this.createData()
-      } else if (this.dialogStatus == 'update') {
-        this.updateData()
+      if (this.dialogStatus == "create") {
+        this.createData();
+      } else if (this.dialogStatus == "update") {
+        this.updateData();
       }
     },
     handleCreate() {
-      this.resetTemp()
-      this.temp.category_id = this.listQuery.category_id
-      this.dialogStatus = 'create'
-      this.dialogFormVisible = true
+      this.resetTemp();
+      this.temp.category_id = this.listQuery.category_id;
+      this.dialogStatus = "create";
+      this.dialogFormVisible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     createData() {
       // this.$refs['dataForm'].validate((valid) => {
       //   if (valid) {
       createArticle(this.temp).then(() => {
-        this.dialogFormVisible = false
+        this.dialogFormVisible = false;
         this.$message({
           message: "添加成功",
           type: "success",
           duration: 2 * 1000,
         });
-        this.getList()
-      })
+        this.getList();
+      });
       //   }
       // })
     },
     handleUpdate(row) {
-      let article_id = row.article_id
-      this.dialogStatus = 'update'
-      this.resetTemp()
-      this.dialogFormVisible = true
-      fetchArticleDetails({ article_id }).then(res => {
+      let article_id = row.article_id;
+      this.dialogStatus = "update";
+      this.resetTemp();
+      this.dialogFormVisible = true;
+      fetchArticleDetails({ article_id }).then((res) => {
         this.temp = res.data;
         if (this.temp.label_name) {
-          let data = JSON.parse(this.temp.label_name)
+          let data = JSON.parse(this.temp.label_name);
           data.forEach((item, index) => {
-            this.chooseTagData[index] = item.value
-          })
+            this.chooseTagData[index] = item.value;
+          });
         }
 
         this.$nextTick(() => {
-          this.$refs['dataForm'].clearValidate()
-        })
-      })
+          this.$refs["dataForm"].clearValidate();
+        });
+      });
     },
     updateData() {
       // this.$refs['dataForm'].validate((valid) => {
       //   if (valid) {
       updateArticle(this.temp).then(() => {
-        this.dialogFormVisible = false
+        this.dialogFormVisible = false;
         this.$message({
           message: "更新成功",
           type: "success",
           duration: 2 * 1000,
         });
 
-        this.getList()
-      })
+        this.getList();
+      });
       //   }
       // })
     },
     handleDelete({ title, article_id }) {
-      this.$confirm('是否确认删除名称为"' + title + '"的数据项?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function () {
-        console.log('del')
-        return delArticle({ article_id })
-      }).then((response) => {
+      this.$confirm('是否确认删除名称为"' + title + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          console.log("del");
+          return delArticle({ article_id });
+        })
+        .then((response) => {
           if (response.code === 200) {
             this.$message({
               message: "删除分类成功",
               type: "success",
               duration: 2 * 1000,
             });
-          this.open = false
-          this.getList()
+            this.open = false;
+            this.getList();
           } else {
             this.$message({
               message: "删除分类失败",
@@ -555,11 +627,13 @@ export default {
               duration: 2 * 1000,
             });
           }
-      }).catch(function () { })
+        })
+        .catch(function () {});
     },
     uploadSuccess(response, file) {
-      if (response.state == 'SUCCESS') {
-        this.temp.img = response.url
+      console.log(response);
+      if (response.state == "SUCCESS" && this.validation) {
+        this.temp.img = response.url;
       }
       // const uid = file.uid;
       // const objKeyArr = Object.keys(this.listObj);
@@ -572,10 +646,10 @@ export default {
       // }
     },
     uploadFileSuccess(response, file) {
-      let obj = {}
-      obj.name = response.original
-      obj.url = response.url
-      this.temp.script_url = JSON.stringify(obj)
+      let obj = {};
+      obj.name = response.original;
+      obj.url = response.url;
+      this.temp.script_url = JSON.stringify(obj);
     },
     handleFileExceed(files, fileList) {
       this.$message.warning("只允许上传一个脚本");
@@ -593,33 +667,33 @@ export default {
     uploadError(err) {
       this.$alert(err, "发生错误", {
         confirmButtonText: "确定",
-        callback: (action) => { },
+        callback: (action) => {},
       });
     },
     /** 查询分类下拉树结构 */
     getTreeselect() {
-      listCategory().then(response => {
-        this.categoryOptions = []
-        this.categoryOptions.push(...response.data)
-      })
+      listCategory().then((response) => {
+        this.categoryOptions = [];
+        this.categoryOptions.push(...response.data);
+      });
     },
     /** 转换分类数据结构 */
     normalizer(node) {
       if (node.children && !node.children.length) {
-        delete node.children
+        delete node.children;
       }
       return {
         id: node.category_id,
         label: node.category_name,
-        children: node.children
-      }
+        children: node.children,
+      };
     },
     // 选择类别，获取对应的标签数据
     chooseCategory(node) {
       this.tagData = node.label_name ? JSON.parse(node.label_name) : [];
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .app-container {