首页上传图片限制大小，上传图片宽度自适应

src/utils/get-img-width.js

@@ -1,7 +1,7 @@
 import { Message } from 'element-ui'
 export default function (file, id) {
-    let width = 0;
-    let height = 0;
+    let width = null;
+    let height = null;
     switch (id) {
         case 23: //深度解说
             width = 650;
@@ -23,6 +23,14 @@ export default function (file, id) {
             width = 380;
             height = 220;
             break;
+        case 'bigSwiper': //首页大轮播
+            width = 1920;
+            height = 960;
+            break;
+        case 'smallSwiper': //首页小轮播
+            width = 722;
+            height = 406;
+            break;
     };
     return new Promise(resolve => {
         let reader = new FileReader();
@@ -32,7 +40,7 @@ export default function (file, id) {
             let img = document.createElement("img");
             img.src = txt;
             img.onload = function () {
-                console.log(id, width, height);
+                // console.log(id, width, height);
                 if (width && height) {
                     if (img.width === width && img.height === height) {
                         resolve(true)
@@ -51,8 +59,3 @@ export default function (file, id) {
         };
     })
 }
-// 1. 650   350
-// 1. 650   350
-// 1. 650   350
-// 1. 650   350
-// 1. 650   350

src/views/ad/index.vue

@@ -6,7 +6,8 @@
         type="primary"
         icon="el-icon-edit"
         @click="handleCreate"
-      >添加资讯</el-button>
+        >添加资讯</el-button
+      >
     </div>
     <el-table
       :key="tableKey"
@@ -15,47 +16,58 @@
       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.news_id }}</span>
         </template>
       </el-table-column>
       <el-table-column label="分类" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ row.static | getStaticName(statics) }}</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.image" 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="创建时间" 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
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            >修改</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>
@@ -77,11 +89,17 @@
       size="950px"
     >
       <div class="drawer__content">
-        <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="类型">
             <el-select v-model="temp.static" placeholder="选择类型">
               <el-option
-                v-for="(item,index) in statics"
+                v-for="(item, index) in statics"
                 :key="index"
                 :label="item.name"
                 :value="item.value"
@@ -101,7 +119,7 @@
               @change="handleSelectBranch"
             >
               <el-option
-                v-for="(item,index) in articles"
+                v-for="(item, index) in articles"
                 :key="index"
                 :label="item.title"
                 :value="item.article_id"
@@ -119,16 +137,17 @@
               v-if="temp.image"
               :src="temp.image"
               class="el-upload el-upload--picture-card"
-              style="float:left"
+              style="float: left; width: auto"
             />
             <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>
@@ -144,11 +163,17 @@
 </template>
 
 <script>
-import { fetchAdList, createAd, updateAd, delAd, searchArticle } from '@/api/ad'
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+import {
+  fetchAdList,
+  createAd,
+  updateAd,
+  delAd,
+  searchArticle,
+} from "@/api/ad";
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
 
 export default {
-  name: 'adIndex',
+  name: "adIndex",
   components: { Pagination },
   data() {
     return {
@@ -160,94 +185,104 @@ export default {
         page: 1,
         limit: 20,
       },
-      uploadAction: process.env.VUE_APP_BASE_API + '/files/uploadFile',
+      uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile",
       temp: {
         id: undefined,
-        static: undefined,
-        title: '',
-        url: '',
+        static: 1,
+        title: "",
+        url: "",
         article_id: undefined,
-        image: '',
-        is_show: 1
+        image: "",
+        is_show: 1,
       },
       statics: [
-        { name: '大轮播图', value: 1 },
-        { name: '小轮播图', value: 2 },
-        { name: '资讯列表', value: 3 },
+        { name: "大轮播图", value: 1 },
+        { name: "小轮播图", value: 2 },
+        { name: "资讯列表", value: 3 },
       ],
       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" },
+        ],
       },
       downloadLoading: false,
       searchArticleLoading: false,
-      articles: []
-    }
+      articles: [],
+      validation: true,
+    };
   },
   created() {
-    this.getList()
+    this.getList();
   },
   filters: {
     getStaticName(id, statics) {
       for (var i = 0; i < statics.length; i++) {
         if (id == statics[i].value) {
-          return statics[i].name
+          return statics[i].name;
         }
       }
-      return ''
+      return "";
     },
   },
   methods: {
+    // 验证图片宽高
+    async validationImages(file) {
+      let desc = this.temp.static === 1 ? "bigSwiper" : "smallSwiper";
+      let res = await this.$getImgWidth(file, desc);
+      this.validation = res;
+      return res;
+    },
     getList() {
-      this.listLoading = true
-      fetchAdList(this.listQuery).then(response => {
-        this.list = response.data.list
-        this.total = response.data.count
+      this.listLoading = true;
+      fetchAdList(this.listQuery).then((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,
-        static: undefined,
-        title: '',
-        url: '',
+        static: 1,
+        title: "",
+        url: "",
         article_id: undefined,
-        image: '',
-        is_show: 1
-      }
+        image: "",
+        is_show: 1,
+      };
     },
     submitForm() {
-      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.dialogStatus = 'create'
-      this.dialogFormVisible = true
+      this.resetTemp();
+      this.dialogStatus = "create";
+      this.dialogFormVisible = true;
       // this.$nextTick(() => {
       //   this.$refs['dataForm'].clearValidate()
       // })
@@ -256,65 +291,68 @@ export default {
       // this.$refs['dataForm'].validate((valid) => {
       //   if (valid) {
       createAd(this.temp).then(() => {
-        this.dialogFormVisible = false
+        this.dialogFormVisible = false;
         this.$message({
           message: "添加成功",
           type: "success",
           duration: 2 * 1000,
         });
-        this.getList()
-      })
+        this.getList();
+      });
       //   }
       // })
     },
     handleUpdate(row) {
-      console.log(row)
       // let news_id = row.news_id
       // fetchAdDetails({news_id}).then(res => {
 
-      var that = this
-      searchArticle(row.article_id).then(res => {
-        that.articles = res.data
-        that.temp = row
-        this.dialogStatus = 'update'
-        this.dialogFormVisible = true
-      }).catch(function(err) {
-        console.log(err)
+      var that = this;
+      searchArticle(row.article_id)
+        .then((res) => {
+          that.articles = res.data;
+          that.temp = row;
+          this.dialogStatus = "update";
+          this.dialogFormVisible = true;
         })
+        .catch(function (err) {
+          console.log(err);
+        });
     },
     updateData() {
       // this.$refs['dataForm'].validate((valid) => {
       //   if (valid) {
       updateAd(this.temp).then(() => {
-        this.dialogFormVisible = false
+        this.dialogFormVisible = false;
         this.$message({
           message: "更新成功",
           type: "success",
           duration: 2 * 1000,
         });
 
-        this.getList()
-      })
+        this.getList();
+      });
       //   }
       // })
     },
     handleDelete({ title, news_id }) {
-      this.$confirm('是否确认删除名称为"' + title + '"的数据项?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function () {
-        console.log('del')
-        return delAd({ news_id })
-      }).then((response) => {
+      this.$confirm('是否确认删除名称为"' + title + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          console.log("del");
+          return delAd({ news_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: "删除失败",
@@ -322,18 +360,19 @@ export default {
               duration: 2 * 1000,
             });
           }
-      }).catch(function () { })
+        })
+        .catch(function () {});
     },
     uploadSuccess(response, file) {
-      if (response.state == 'SUCCESS') {
-        this.temp.image = response.url
+      if (this.validation && response.state == "SUCCESS") {
+        this.temp.image = response.url;
       }
     },
     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);
     },
     uploadRemove(file) {
       const uid = file.uid;
@@ -348,14 +387,14 @@ export default {
     uploadError(err) {
       this.$alert(err, "发生错误", {
         confirmButtonText: "确定",
-        callback: (action) => { },
+        callback: (action) => {},
       });
     },
     handleSelectBranch(item) {
-      console.log('远程搜索选中后返回的item：：：：：即value的值')
-      console.log(item)
+      console.log("远程搜索选中后返回的item：：：：：即value的值");
+      console.log(item);
       //如果要获取选择的 id或者名字   从item中取值
-      this.$set(this.temp,'article_id', item)
+      this.$set(this.temp, "article_id", item);
     },
     // 搜索模糊查询数据下拉框
     remoteMethod(query) {
@@ -363,19 +402,19 @@ export default {
       searchArticle(query)
         .then(function (res) {
           //将取到的值进行遍历
-          that.articles = res.data
-          that.list = that.states.map(item => {
+          that.articles = res.data;
+          that.list = that.states.map((item) => {
             // item.uid     item.name根据接口里的关键字
             return { value: item.uid, label: item.name };
           });
         })
         .catch(function (err) {
-          console.log(err)
+          console.log(err);
         });
-        return
+      return;
     },
-  }
-}
+  },
+};
 </script>
 <style lang="scss" scoped>
 .app-container {

src/views/article/index.vue

@@ -260,7 +260,7 @@
               v-if="temp.img"
               :src="temp.img"
               class="el-upload el-upload--picture-card"
-              style="float: left"
+              style="float: left; width: auto"
             />
             <el-upload
               ref="sys_app_logo"
@@ -510,11 +510,7 @@ export default {
     getList() {
       this.listLoading = true;
       fetchList(this.listQuery).then((response) => {
-        response.data.list.forEach((item) => {
-          // if (!item.is_offline) {
-          //   item.is_offline = 2;
-          // }
-        });
+        console.log(response);
         this.list = response.data.list;
         this.total = response.data.count;
         // Just to simulate the time of the request