add workshop【uploadImg、viewBigImg】

Author: crank220

README.md

@@ -1,11 +1,16 @@
 # vue_iview_admin
 
+## 简介
+> iview后台管理系统模版、菜单自动注册/管理、mock login、html2pdf、上传图片、查看大图
+
+
 ## 项目结构
 
 ```bash
 +-- src
 |
 |   +-- assets -> 全局资源目录
+|   |   +-- css -> css资源文件
 |   |   +-- img -> 图片资源文件
 |   |   +-- mock -> 接口mock数据
 |   |

src/components/uploadImg/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="upload-img">
-    <Upload type="drag" action="" :format="['jpg','jpeg','png','gif']" :show-upload-list="false"
+    <Upload type="drag" action="//jsonplaceholder.typicode.com/posts/" :format="['jpg','jpeg','png','gif']" :show-upload-list="false"
       :on-success="rst => $emit('uploadSuccess', rst)" :on-error="uploadError" :on-format-error="uploadFormatError">
       <div class="upload">
         <div class="upload-remind" v-show="!imgLink">
@@ -14,6 +14,7 @@
         </div>
       </div>
     </Upload>
+    <p>{{uploadPictureSize}}</p>
     <ViewBigImg :imgSrc="viewImgSrc" @close="viewImgSrc = ''" />
   </div>
 </template>
@@ -33,16 +34,41 @@ export default {
   },
   data() {
     return {
-      viewImgSrc: ""
+      viewImgSrc: "",
+      uploadPictureSize: ""
     }
   },
+  watch: {
+    imgLink() {
+      this.getImgSize()
+    }
+  },
+  created() {
+    this.getImgSize()
+  },
   methods: {
     uploadError() {
       this.$Message.error("上传失败")
     },
     uploadFormatError() {
       this.$Message.error("请上传jpg，jpeg，png，gif格式的图片")
-    }
+    },
+    getImgSize() {
+      if (this.imgLink) {
+        const image = new Image()
+        image.src = this.imgLink
+        image.onload = () => {
+          const { width, height } = image
+          this.uploadPictureSize = width && height ? `${width} x ${height}` : ""
+        }
+        image.onerror = () => {
+          this.uploadPictureSize = ""
+          this.$Message.error("图像加载过程中发生错误")
+        }
+      } else {
+        this.uploadPictureSize = ""
+      }
+    },
   }
 }
 </script>

src/router/index.js

@@ -7,6 +7,9 @@ const Login = () => import(/* webpackChunkName: "loginReg" */ '../views/login/in
 
 const Html2pdf = () => import(/* webpackChunkName: "html2pdf" */ '../views/html2pdf/index')
 
+const Workshop = () => import(/* webpackChunkName: "workshop" */ '../views/workshop/index')
+const WorkshopViewBigImg = () => import(/* webpackChunkName: "workshop" */ '../views/workshop/cell/viewBigImg')
+const WorkshopUploadImg = () => import(/* webpackChunkName: "workshop" */ '../views/workshop/cell/uploadImg')
 
 Vue.use(Router)
 
@@ -17,7 +20,7 @@ const router = new Router({
       path: '/',
       name: 'home',
       component: Home,
-      meta: { title: '首页'}
+      meta: { title: '首页' }
     },
     {
       path: '/login',
@@ -30,7 +33,28 @@ const router = new Router({
       name: 'html2pdf',
       component: Html2pdf,
       meta: { title: 'html2pdf' }
-    }
+    },
+    {
+      path: '/workshop',
+      name: 'workshop',
+      component: Workshop,
+      meta: { title: 'workshop' },
+      redirect: "/workshop/viewBigImg",
+      children: [
+        {
+          path: '/workshop/viewBigImg',
+          name: 'workshoViewBigImg',
+          component: WorkshopViewBigImg,
+          meta: { title: '查看大图' }
+        },
+        {
+          path: '/workshop/uploadImg',
+          name: 'workshoUploadImg',
+          component: WorkshopUploadImg,
+          meta: { title: '上传图片' }
+        }
+      ]
+    },
   ]
 })
 

src/views/workshop/cell/uploadImg.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="upload-img-demo">
+    <UploadImg :imgLink="imgLink" @uploadSuccess="rst => uploadSuccess('try', rst)"  @delete="imgLink = ''" />
+    <cellGroup>
+      <Cell>组件功能：增删改图片、获取尺寸、预览大图</Cell>
+    </cellGroup>
+  </div>
+</template>
+
+<script>
+import UploadImg from "../../../components/uploadImg/index"
+export default {
+  name: "WorkshopUploadImg",
+  components: {
+    UploadImg
+  },
+  data() {
+    return {
+      imgLink: ''
+    }
+  },
+  methods: {
+    uploadSuccess(type, res) {
+      // (type === 'try') && (this.imgLink = res.id)
+      (type === 'try') && (this.imgLink = "http://pic1.win4000.com/wallpaper/c/56984cb655731.jpg")
+      this.$Message.success("文件上传成功")
+    }
+  }
+}
+</script>

src/views/workshop/cell/viewBigImg.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="view-big-img-demo">
+    <Card>
+      <img :src="item" v-for="item in mockImgArr" :key="item" @click="viewImgSrc = item" />
+    </Card>
+
+    <Button @click="model = true">在modal中引用</Button>
+    <Modal v-model="model" width="1200" :footer-hide="true" class="flag">
+      <img :src="item" v-for="item in mockImgArr" :key="item" @click="viewImgSrc = item" />
+    </Modal>
+
+    <ViewBigImg :imgSrc="viewImgSrc" @close="viewImgSrc = ''" />
+  </div>
+</template>
+
+<script>
+import ViewBigImg from "../../../components/viewBigImg/index"
+export default {
+  name: "WorkshopViewBigImg",
+  components: {
+    ViewBigImg
+  },
+  data() {
+    return {
+      mockImgArr: ["http://pic1.win4000.com/wallpaper/c/56984cb655731.jpg", "http://pic1.win4000.com/wallpaper/4/56985459a06ce.jpg", "https://imgsa.baidu.com/%B0%B2%B6%E0%B7%D2_/pic/item/db1ce83c8922382cac4b5f95.jpg"],
+      viewImgSrc: '',
+      model: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.view-big-img-demo .ivu-card /deep/.ivu-card-body, .flag /deep/.ivu-modal-body{
+  display: flex;
+  justify-content: space-around;
+  img{
+    width: 30%;
+    height: 300px;
+    cursor: pointer;
+    object-fit: contain;
+  }
+}
+.ivu-btn{
+  margin-top: 20px;
+}
+</style>

src/views/workshop/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="workshop">
+    <router-view />
+  </div>
+</template>