封装上传组件

src/api/menu.js

@@ -304,17 +304,5 @@ export const json = {
         }
       ]
     },
-    {
-      "name": "Http://ruoyi.vip",
-      "path": "http://ruoyi.vip",
-      "hidden": false,
-      "component": "Layout",
-      "meta": {
-        "title": "若依官网",
-        "icon": "guide",
-        "noCache": false,
-        "link": "http://ruoyi.vip"
-      }
-    }
   ]
 }

src/api/system/public.js

@@ -1,23 +1,40 @@
 import request from '@/utils/request'
+
 // 查询部门下拉树结构
 export function deptTreeSelect() {
-    return request({
-      url: '/system/dept/deptTree',
-      method: 'get'
-    })
-  }
+  return request({
+    url: '/system/dept/deptTree',
+    method: 'get'
+  })
+}
+
 // 查询文件
 export function getFile(code) {
   return request({
-    url: '/file/file/getFile/' +code,
+    url: '/file/file/getFile/' + code,
     method: 'get'
   })
 }
 
-  // 查询机构下拉树结构
+// 查询机构下拉树结构
 export function deptTreeList() {
   return request({
     url: '/system/dept/sysDeptTree',
     method: 'get'
   })
 }
+
+
+export function upload(data,type) {
+  return request({
+    url: '/file/file/upload',
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+    data: data,
+    params:{
+      busType: type
+    }
+  })
+}

src/components/ImageUpload/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="component-upload-image">
     <el-upload
+      v-if="type === 'more'"
       multiple
-      :action="uploadImgUrl"
+      action="#"
       list-type="picture-card"
       :on-success="handleUploadSuccess"
       :before-upload="handleBeforeUpload"
@@ -15,48 +16,78 @@
       :headers="headers"
       :file-list="fileList"
       :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
-    >
+      :http-request="uploadImage"
+      :class="{hide: fileList.length >= limit}">
       <i class="el-icon-plus"></i>
+      <!-- 上传提示 -->
+      <div class="el-upload__tip" slot="tip" v-if="showTip">
+        请上传
+        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+        的文件
+      </div>
     </el-upload>
 
-    <!-- 上传提示 -->
-    <div class="el-upload__tip" slot="tip" v-if="showTip">
-      请上传
-      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
-      的文件
-    </div>
+    <el-upload
+      v-if="type === 'alone'"
+      drag
+      action="#"
+      :before-upload="handleBeforeUpload"
+      :limit="2"
+      :on-error="handleUploadError"
+      ref="imageUpload"
+      :show-file-list="false"
+      :file-list="fileList"
+      :http-request="uploadImage">
+      <div v-if="fileList.length > 0" class="img-box">
+        <img style="width:100%;height: 100%;" :src="fileList[0].url" alt="" >
+        <div class="img-model" @click.stop="clickImg">
+          <span>预览</span>
+        </div>
+      </div>
+      <div v-else>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip" v-if="showTip">
+          请上传
+          <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+          <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+          的文件
+        </div>
+<!--        <div class="el-upload__tip" slot="tip">只能上传jpg/png/jpeg文件，且不超过500kb</div>-->
+      </div>
+    </el-upload>
 
     <el-dialog
       :visible.sync="dialogVisible"
       title="预览"
       width="800"
-      append-to-body
-    >
-      <img
-        :src="dialogImageUrl"
-        style="display: block; max-width: 100%; margin: 0 auto"
-      />
+      append-to-body>
+      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto"/>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import { getToken } from "@/utils/auth";
-import {getFile} from "@/api/system/public";
+import { upload } from "@/api/system/public"
 
 export default {
   props: {
     value: [String, Object, Array],
-    // 图片数量限制
+    //两种模式：more（多选）、alone（单选）
+    type:{
+      type:String,
+      default: 'more',
+    },
+    // 图片数量限制（单选模式下失效）
     limit: {
       type: Number,
       default: 5,
     },
     // 大小限制(MB)
     fileSize: {
-       type: Number,
+      type: Number,
       default: 5,
     },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
@@ -81,7 +112,8 @@ export default {
       headers: {
         Authorization: "Bearer " + getToken(),
       },
-      fileList: []
+      fileList: [],
+      file:null
     };
   },
   watch: {
@@ -113,8 +145,35 @@ export default {
     },
   },
   methods: {
+    //单传模式下的预览
+    clickImg(){
+      this.dialogImageUrl = this.fileList[0].url;
+      this.dialogVisible = true;
+    },
+    //自定义上传方式(自带的成功回调及失败回调会失效)
+    uploadImage(fileObj){
+      console.log(fileObj,'fileObj')
+      let formData = new FormData();
+      formData.append('file',fileObj.file);
+      upload(formData,'image').then(res=>{
+        /*上传成功*/
+        this.$modal.closeLoading();
+        let imgUrl = process.env.VUE_APP_BASE_API + res.data.url;
+        let arr = [];
+        arr.push({ name: res.data.name, url: imgUrl})
+        this.fileList = arr;
+        this.$emit("input", this.listToString(this.fileList));
+      }).catch(err=>{
+        /*上传失败*/
+        this.$modal.closeLoading();
+        //this.$modal.msgError(res.msg);
+        this.$refs.imageUpload.handleRemove(fileObj.file);
+        //this.uploadedSuccessfully();
+      })
+    },
     // 上传前loading加载
     handleBeforeUpload(file) {
+      console.log('hhhhhhh')
       let isImg = false;
       if (this.fileType.length) {
         let fileExtension = "";
@@ -143,6 +202,7 @@ export default {
       }
       this.$modal.loading("正在上传图片，请稍候...");
       this.number++;
+      this.file = file;
     },
     // 文件个数超出
     handleExceed() {
@@ -152,7 +212,7 @@ export default {
     handleUploadSuccess(res, file) {
       console.log(res,'res')
       if (res.code === 200) {
-        let imgUrl = process.env.VUE_APP_BASE_API + res.data.url
+        let imgUrl = process.env.VUE_APP_BASE_API + res.data.url;
         this.uploadList.push({ name: res.data.name, url: imgUrl});
         this.uploadedSuccessfully();
 
@@ -175,6 +235,7 @@ export default {
         this.fileList.splice(findex, 1);
         this.$emit("input", this.listToString(this.fileList));
       }
+      console.log( this.listToString(this.fileList),'删除图片')
     },
     // 上传失败
     handleUploadError() {
@@ -187,7 +248,6 @@ export default {
         this.fileList = this.fileList.concat(this.uploadList);
         this.uploadList = [];
         this.number = 0;
-        console.log(this.listToString(this.fileList),'ppppp')
         this.$emit("input", this.listToString(this.fileList));
         this.$modal.closeLoading();
       }
@@ -213,8 +273,8 @@ export default {
 </script>
 <style scoped lang="scss">
 // .el-upload--picture-card 控制加号部分
-::v-deep.hide .el-upload--picture-card {
-    display: none;
+::v-deep .hide .el-upload--picture-card {
+    display: none !important;
 }
 // 去掉动画效果
 ::v-deep .el-list-enter-active,
@@ -226,5 +286,31 @@ export default {
     opacity: 0;
     transform: translateY(0);
 }
+.img-box{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .img-model{
+    width: 100%;
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    align-items: center;
+    >span{
+      background-color: rgba(30, 30, 30, .3);
+      display: block;
+      padding: 5px;
+      color:#fff;
+      text-shadow: 0 0 2px #1e1e1e;
+    }
+  }
+  &:hover{
+    .img-model{
+      display: block;
+    }
+  }
+}
+
 </style>
 

src/layout/components/Navbar.vue

@@ -107,7 +107,7 @@ export default {
         type: 'warning'
       }).then(() => {
         this.$store.dispatch('LogOut').then(() => {
-          location.href = '/index';
+          location.href = '/';
         })
       }).catch(() => {});
     }

src/mixins/tableList.js

@@ -9,6 +9,7 @@ export default {
       },
       // 遮罩层
       loading: false,
+      queryParams:{},
     }
   },
   methods:{
@@ -25,5 +26,8 @@ export default {
       this.$refs.tree.setCurrentKey(null);
       this.handleQuery();
     },
+    getTableList(){
+
+    }
   }
 }

src/permission.js

@@ -11,13 +11,13 @@ NProgress.configure({ showSpinner: false })
 const whiteList = ['/login', '/register']
 
 router.beforeEach((to, from, next) => {
-  console.log(to,from,'路由跳转')
+  console.log('从'+from.path+'到'+to.path,'路由跳转')
   NProgress.start()
   if (getToken()) {
     to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
     /* has token*/
     if (to.path === '/login') {
-      next({ path: '/' })
+      next()
       NProgress.done()
     } else {
       if (store.getters.roles.length === 0) {
@@ -32,7 +32,6 @@ router.beforeEach((to, from, next) => {
           })
         }).catch(err => {
           console.log(err,'err')
-          sessionStorage.clear();
           next({ path: '/login' })
           store.dispatch('LogOut').then(() => {
             Message.error(err)

src/router/index.js

@@ -87,12 +87,12 @@ export const constantRoutes = [
   {
     path: '',
     component: Layout,
-    redirect: 'index',
+    redirect: 'home',
     children: [
       {
-        path: 'index',
+        path: 'home',
         component: () => import('@/views/index'),
-        name: 'Index',
+        name: 'home',
         meta: { title: '首页', icon: 'dashboard', affix: true }
       }
     ]

src/store/modules/permission.js

@@ -50,6 +50,7 @@ const permission = {
           commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
           commit('SET_DEFAULT_ROUTES', sidebarRoutes)
           commit('SET_TOPBAR_ROUTES', sidebarRoutes)
+          console.log(rewriteRoutes,'rewriteRoutes')
           resolve(rewriteRoutes)
         })
         //前端模拟数据

src/utils/request.js

@@ -6,6 +6,7 @@ import errorCode from '@/utils/errorCode'
 import { tansParams, blobValidate } from "@/utils/ruoyi";
 import cache from '@/plugins/cache'
 import { saveAs } from 'file-saver'
+import permission from "@/store/modules/permission";
 
 let loading;
 let downloadLoadingInstance;
@@ -23,7 +24,6 @@ const service = axios.create({
 
 // request拦截器
 service.interceptors.request.use(config => {
-  console.log(config,'con')
   // 不传递默认关闭loading
   if (config.showLoading) loading = Loading.service({ fullscreen: true, background: "transparent" });
   // 是否需要设置 token
@@ -153,20 +153,5 @@ export function download(url, params, filename, config) {
     downloadLoadingInstance.close();
   })
 }
-export function upload(url, params, filename, config) {
 
-  try {
-    service.post(url, params, { headers: {
-      'Content-Type': 'multipart/form-data',
-    },}).then((data) => {
-      // 处理上传成功的逻辑
-      console.log('上传成功', data);
-    });
-
-
-  } catch (error) {
-    // 处理上传失败的逻辑
-    console.log('上传失败', error);
-  }
- }
 export default service

src/views/login.vue

@@ -150,14 +150,7 @@ export default {
           this.$store.dispatch("Login", this.loginForm).then(() => {
             this.loading = false;
             console.log(this.redirect,'this.redirect')
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
-            // this.$store.dispatch('GenerateRoutes').then(accessRoutes => {
-            //    // 根据roles权限生成可访问的路由表
-            //   this.$router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            //   //next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-            // })
-            // console.log(this.redirect,'11111')
-            // this.$router.push({ path: 'index' });
+            this.$router.push({ path:"/home" }).catch(()=>{});
           }).catch(() => {
             this.loading = false;
             if (this.captchaEnabled) {

src/views/system/dept/extend.vue

@@ -224,23 +224,26 @@
           :active-value="1"
           :inactive-value="0"
         ></el-switch>
-        <div v-if="askari">
-          <div class="image-container" style="margin-left: 20px">
-            <p style="font-size: 12px; color: #999">上传保安证正面</p>
-            <image-upload :limit="1" :fileSize="2"></image-upload>
+        <div>
+
+        </div>
+        <el-row v-if="askari">
+          <el-col :span="12" :xs="24">
+            <p style="font-size: 12px; color: #999;">上传保安证正面</p>
+            <image-upload :fileSize="2" :type="'alone'"></image-upload>
 
             <!--            <el-image class="zoom-image border-color-change" :src="uploadp" fit="contain" @click="triggerFileInput"></el-image>-->
             <!--            <input type="file"-->
             <!--                   ref="fileInput"-->
             <!--                   @change="handleFileChange"-->
             <!--                   style="display: none;"/>-->
-          </div>
-          <div class="image-container" style="margin-right: 0">
+          </el-col>
+          <el-col :span="12">
             <p style="font-size: 12px; color: #999">上传保安证反面</p>
-            <image-upload :limit="1" :fileSize="2"></image-upload>
+            <image-upload :fileSize="2" :type="'alone'"></image-upload>
             <!--            <el-image class="zoom-image border-color-change" :src="uplp" fit="contain"></el-image>-->
-          </div>
-        </div>
+          </el-col>
+        </el-row>
       </div>
     </div>
 
@@ -1229,11 +1232,6 @@ export default {
 }
 .container {
 }
-.image-container {
-  display: inline-block;
-  width: 200px;
-  margin-right: 20px; /* 设置与下一个div的水平间距 */
-}
 .zoom-image {
   transition: transform 0.3s ease;
 }