添加移动端文件上传

src/App.vue

@@ -17,6 +17,7 @@ export default {
   },
   watch: {
     $route: function(to, from) {
+      console.log('from:',from,'to:',to)
       const path = to.path
       if (path.indexOf('/login') < 0) {
         if (path.indexOf('_m') > 0 && this.$pc) {

src/components/SimpleUploader/globalUploader.vue

@@ -49,7 +49,7 @@
     </uploader>
 
     <div class="process-area" id="drag-ball" @click="expand" :style="processAreaClass">
-      <div class="process-anime">
+      <div class="process-anime" >
         <div class="cube-a" :style="{'top': -process-65+'%'}"></div>
         <div class="cube-b" :style="{'top': -process-65+'%'}"></div>
 
@@ -62,6 +62,8 @@
           <svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">
             <!--"M 14.1 27.2 l 7.1 7.2 l 16.7 -16.8"-->
             <path d="M 13.1 21.2 l 5.1 5.2 l 12.7 -12.8" class="checkmark__check" style="fill: transparent;"></path>
+            <!--<path v-if="pc" d="M 13.1 21.2 l 5.1 5.2 l 12.7 -12.8" class="checkmark__check" style="fill: transparent;"></path>-->
+            <!--<path v-if="!pc" d="M 15.5 20.2 l 3.5 3.6 l 7.7 -7.8" class="checkmark__check" style="fill: transparent;"></path>-->
           </svg>
         </div>
       </div>
@@ -127,8 +129,8 @@ export default {
         accept: '*'
       },
       statusText: {
-        success: '成功了',
+        success: '上传成功',
-        error: '出错了',
+        error: '上传失败',
         uploading: '上传中',
         paused: '暂停中',
         waiting: '等待中'
@@ -142,7 +144,8 @@ export default {
       netSpeed: 0,
       isUploading: false,
       filePanel: {},
-      processAreaClass: {}
+      processAreaClass: {},
+      pc: true
     }
   },
   computed: {
@@ -166,6 +169,13 @@ export default {
       }
     })
 
+    Bus.$on('uploadFileListBack',() => {
+      console.log(this.process)
+      if(this.process !== -10 && this.process !== 100 && this.fileListLength !== 0){
+        this.shrink()
+      }
+    })
+
     this.$nextTick(() => {
       window.uploader = this.$refs.uploader.uploader
     })
@@ -174,6 +184,7 @@ export default {
   destroyed() {
     Bus.$off('openUploader')
     Bus.$off('uploadFolder')
+    Bus.$off('uploadFileListBack')
   },
   methods: {
     // onFileAdded(file) {
@@ -204,10 +215,16 @@ export default {
           }).catch(e => {})
         })
       }
+      if(window.pc){
+        this.pc = true
+        this.panelShow = true
+      }else{
+        this.pc = false
+        this.shrink()
+      }
       files.forEach(file => {
         // 上传文件
         console.log('上传->', file)
-        this.panelShow = true
         console.log(pathsLength)
         // this.computeMD5(file)
         // if (pathsLength < 1) {
@@ -382,6 +399,9 @@ export default {
     },
     // 展开球
     expand() {
+      if(!pc){
+        this.$router.push(`/upload/index_m`)
+      }
       this.filePanel = {
         'width': '720px',
         'height': '300px',
@@ -396,6 +416,16 @@ export default {
     },
     // 收缩成球
     shrink(){
+      let width = '92px';
+      let height = '92px';
+      let right = '20px';
+      let bottom = '20px';
+      if(!pc){
+        width = '92px';
+        height = '92px';
+        right = '10px';
+        bottom = '70px';
+      }
       const that = this
       this.filePanel = {
         'color': 'white',
@@ -410,10 +440,10 @@ export default {
       setTimeout(function () {
         that.isShrink = true
         that.processAreaClass = {
-          'right': '20px',
+          'right': right,
-          'bottom': '20px',
+          'bottom': bottom,
-          'width': '92px',
+          'width': width,
-          'height': '92px',
+          'height': height,
         }
         that.filePanel = {
           'color': 'white',

src/layout/components/Navbar.vue

@@ -45,8 +45,10 @@ export default {
   mounted() {
     if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
       this.isShow = false
+      window.pc = false
     } else {
       this.isShow = true
+      window.pc = true
     }
   },
   components: {

src/main.js

@@ -15,7 +15,7 @@ import router from './router'
 import VueWechatTitle from 'vue-wechat-title'
 // import WeVue from 'we-vue'
 // import 'we-vue/lib/style.css'
-import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet} from 'vant';
+import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet, Dialog, Field} from 'vant';
 
 import '@/icons' // icon
 import '@/permission' // permission control
@@ -62,6 +62,9 @@ Vue.use(Icon);
 Vue.use(Tabbar);
 Vue.use(TabbarItem);
 Vue.use(ActionSheet);
+Vue.use(Dialog);
+Vue.use(Field);
+
 
 Vue.use(uploader)
 Vue.use(EVueContextmenu)

src/router/index.js

@@ -229,7 +229,7 @@ export const dynamicRouters = [
       path: '',
       name: 'Home_m',
       component: () => import('@/views/home/mobile/index'),
-      meta: { title: '所有文件', icon: 'ziyuan' }
+      meta: { title: '所有文件' }
     }]
   },
   {
@@ -243,6 +243,16 @@ export const dynamicRouters = [
         meta: { title: 'demo', icon: 'example' }
       }
     ]
+  },
+  {
+    path: '/upload',
+    component: Layout,
+    children: [{
+      path: 'index_m',
+      name: 'upload_m',
+      component: () => import('@/views/upload/mobile/index'),
+      meta: { title: '上传文件列表' }
+    }]
   }
 ]
 

src/views/home/mobile/index.vue

@@ -9,7 +9,7 @@
       @scroll="swipeUp"
     >
       <van-sticky :offset-top="0">
-        <!-- <div>{{test}} {{diffTabbarTop}} {{lastTabbarOffsetTop}}</div> -->
+         <div>{{test}} {{diffTabbarTop}} {{lastTabbarOffsetTop}}</div>
         <van-nav-bar
           v-if="pathList.length < 3"
           title="浏览"
@@ -41,7 +41,8 @@
       </van-sticky>
 
       <van-cell class="list-item" center v-for="item in fileList" :key="item.id" @click="fileClick(item)" :is-link="item.isFolder">
-          <van-row>
+        <div @touchstart="touchStart" @touchend="touchEnd">
+          <van-row class="row-file">
             <van-col span="4" align="center" class="list-cell-icon">
               <icon-file :item="item" :image-url="imageUrl"></icon-file>
             </van-col>
@@ -61,58 +62,65 @@
             <van-col span="4"></van-col>
           </van-row>
           <!--<van-divider></van-divider>-->
+        </div>
       </van-cell>
     </van-list>
   </van-pull-refresh>
     <!--<van-tabbar v-model="tabActive" :class="tabBottom">-->
-    <div v-if="diffTabbarTop === 0 || diffTabbarTop > 0">
+    <!--<div v-if="diffTabbarTop === 0 || diffTabbarTop > 0">-->
-      <van-tabbar
+      <!--<van-tabbar-->
-        id="tabbar"
+        <!--id="tabbar"-->
-        active-color="#07c160"
+        <!--active-color="#07c160"-->
-        inactive-color="#000"
+        <!--inactive-color="#000"-->
-        v-model="tabActive"
+        <!--v-model="tabActive"-->
-        class="tab-bottom">
+        <!--class="tab-bottom">-->
-        <van-tabbar-item><svg-icon icon-class="tab-folder" /><div class="tab-text">浏览</div></van-tabbar-item>
+        <!--<van-tabbar-item><svg-icon icon-class="tab-folder" /><div class="tab-text">浏览</div></van-tabbar-item>-->
-        <van-tabbar-item><svg-icon icon-class="tab-recently" /><div class="tab-text">最近</div></van-tabbar-item>
+        <!--<van-tabbar-item><svg-icon icon-class="tab-recently" /><div class="tab-text">最近</div></van-tabbar-item>-->
-        <van-tabbar-item><svg-icon icon-class="tab-favorite" /><div class="tab-text">收藏</div></van-tabbar-item>
+        <!--<van-tabbar-item><svg-icon icon-class="tab-favorite" /><div class="tab-text">收藏</div></van-tabbar-item>-->
-        <van-tabbar-item><svg-icon icon-class="tab-setting" /><div class="tab-text">设置</div></van-tabbar-item>
+        <!--<van-tabbar-item><svg-icon icon-class="tab-setting" /><div class="tab-text">设置</div></van-tabbar-item>-->
-      </van-tabbar>
+      <!--</van-tabbar>-->
-    </div>
+    <!--</div>-->
-    <div v-if="diffTabbarTop < 0">
+    <!--<div v-if="diffTabbarTop < 0">-->
-      <van-tabbar
+      <!--<van-tabbar-->
-        id="tabbar"
+        <!--id="tabbar"-->
-        v-if="isiPhoneX === 30"
+        <!--v-if="isiPhoneX === 30"-->
-        active-color="#07c160"
+        <!--active-color="#07c160"-->
-        inactive-color="#000"
+        <!--inactive-color="#000"-->
-        v-model="tabActive"
+        <!--v-model="tabActive"-->
-        class="tab-bottom-iphoneX">
+        <!--class="tab-bottom-iphoneX">-->
-        <van-tabbar-item><svg-icon icon-class="tab-folder" /><div class="tab-text">浏览</div></van-tabbar-item>
+        <!--<van-tabbar-item><svg-icon icon-class="tab-folder" /><div class="tab-text">浏览</div></van-tabbar-item>-->
-        <van-tabbar-item><svg-icon icon-class="tab-recently" /><div class="tab-text">最近</div></van-tabbar-item>
+        <!--<van-tabbar-item> <a href="http://www.baidu.com"><svg-icon icon-class="tab-recently" /><div class="tab-text">最近</div></a></van-tabbar-item>-->
-        <van-tabbar-item><svg-icon icon-class="tab-favorite" /><div class="tab-text">收藏</div></van-tabbar-item>
+        <!--<van-tabbar-item><svg-icon icon-class="tab-favorite" /><div class="tab-text">收藏</div></van-tabbar-item>-->
-        <van-tabbar-item><svg-icon icon-class="tab-setting" /><div class="tab-text">设置</div></van-tabbar-item>
+        <!--<van-tabbar-item><svg-icon icon-class="tab-setting" /><div class="tab-text">设置</div></van-tabbar-item>-->
-      </van-tabbar>
+      <!--</van-tabbar>-->
 
-      <van-tabbar
+      <!--<van-tabbar-->
-        id="tabbar"
+        <!--id="tabbar"-->
-        v-if="isiPhoneX === 35"
+        <!--v-if="isiPhoneX === 35"-->
-        active-color="#07c160"
+        <!--active-color="#07c160"-->
-        inactive-color="#000"
+        <!--inactive-color="#000"-->
-        v-model="tabActive"
+        <!--v-model="tabActive"-->
-        class="tab-bottom-iphoneXS">
+        <!--class="tab-bottom-iphoneXS">-->
-        <van-tabbar-item><svg-icon icon-class="tab-folder" /><div class="tab-text">浏览</div></van-tabbar-item>
+        <!--<van-tabbar-item><svg-icon icon-class="tab-folder" /><div class="tab-text">浏览</div></van-tabbar-item>-->
-        <van-tabbar-item><svg-icon icon-class="tab-recently" /><div class="tab-text">最近</div></van-tabbar-item>
+        <!--<van-tabbar-item><svg-icon icon-class="tab-recently" /><div class="tab-text">最近</div></van-tabbar-item>-->
-        <van-tabbar-item><svg-icon icon-class="tab-favorite" /><div class="tab-text">收藏</div></van-tabbar-item>
+        <!--<van-tabbar-item><svg-icon icon-class="tab-favorite" /><div class="tab-text">收藏</div></van-tabbar-item>-->
-        <van-tabbar-item><svg-icon icon-class="tab-setting" /><div class="tab-text">设置</div></van-tabbar-item>
+        <!--<van-tabbar-item><svg-icon icon-class="tab-setting" /><div class="tab-text">设置</div></van-tabbar-item>-->
-      </van-tabbar>
+      <!--</van-tabbar>-->
-    </div>
+    <!--</div>-->
 
     <van-action-sheet
       v-model="actionSheetShow"
-      :actions="actions"
+      :actions="actionsMenus"
       cancel-text="取消"
-      @cancel="onCancel">
+      @cancel="onCancel"
+      @select="selectActionsMenus">
     </van-action-sheet>
 
+    <van-dialog v-model="showNewFolder" show-cancel-button @confirm="newFolderNameClick">
+        <van-field class="new-folder-input" v-model="newFolderName" placeholder="请输入文件夹名称" :border="true" :clearable="true" ref="newFolderInput" :autofocus="true">
+        </van-field>
+    </van-dialog>
+
   </div>
 </template>
 <script>
@@ -131,11 +139,15 @@
   import 'vant/lib/icon/style';
   import 'vant/lib/tabbar/style';
   import 'vant/lib/tabbar-item/style';
+  import 'vant/lib/dialog/style';
+  import 'vant/lib/field/style';
+  import 'vant/lib/toast/style';
 
-  import { getPath, getPathList, setPath, removePath } from '@/utils/path'
   import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
   import api from '@/api/upload-api'
   import IconFile from "../../../components/Icon/IconFile";
+  import Bus from '@/assets/js/bus'
+  import { Toast } from 'vant';
 
   export default {
     components: {IconFile},
@@ -162,11 +174,12 @@
         finished: false,
         refreshing: false,
         actionSheetShow: false, // 下拉菜单
-        actions: [
+        actionsMenus: [
-          { name: '上传文件' },
+          { name: '新建文件夹' },
-          { name: '上传文件夹' },
-          { name: '新建文件夹' }
         ],
+        showNewFolder: false,
+        newFolderName: '新建文件夹',
+        Loop: null
       };
     },
     mounted(){
@@ -187,20 +200,6 @@
         window.addEventListener('popstate', this.goBack, false);
       }
 
-      // 加载路径
-      const pathList = getPathList()
-      if (pathList && pathList !== 'undefined') {
-        const res = JSON.parse(pathList)
-        const list = []
-        res.forEach(function(element) {
-          const item0 = {}
-          item0['folder'] = element.folder + ''
-          item0['index'] = element.index
-          list.push(item0)
-        })
-        this.pathList = list
-      }
-
       const that = this
       // 判断底部tabbar与上边框的距离,用来适配iPhoneX机型下面多出来的部分
       window.addEventListener('scroll', () => {
@@ -233,19 +232,22 @@
       window.removeEventListener('popstate', this.goBack, false);
     },
     methods: {
+      touchStart(e){
+        e.preventDefault();
+        Toast("手指触摸").setDefaultOptions({ duration: 200 });
+        //手指触摸
+        clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
+        this.Loop = setTimeout(function() {
+          Toast("哈哈").setDefaultOptions({ duration: 200 });
+        },700);
+      },
+      touchEnd(){
+        Toast("手指离开").setDefaultOptions({ duration: 200 });
+        //手指离开
+        clearTimeout(this.Loop);
+      },
       // 浏览器的返回事件
       goBack(){
-        // let linkIndex = 0
-        // if (this.$route.query.path){
-        //   this.path = this.$route.query.path
-        //   linkIndex = this.pathList.length - 3;
-        // } else {
-        //   this.path = ''
-        //   this.$router.push(`/_m`)
-        // }
-        // this.pathList.splice(this.pathList.findIndex(v => v.index === linkIndex + 2), this.pathList.length - (linkIndex + 2))
-        // setPath(this.path, this.pathList)
-        // this.getFileList()
         const linkIndex = this.pathList.length-3
         this.handleLink(this.pathList[linkIndex],linkIndex)
       },
@@ -256,8 +258,21 @@
       },
       // 点击右边按钮(标题)
       titleRightClick() {
-        this.actionSheetShow = true
+        Toast("提示").setDefaultOptions({ duration: 200 });
-        console.log('titleRightClick')
+        // this.actionSheetShow = true
+        // this.actionsMenus = [
+        //   { name: '新建文件夹' },
+        // ]
+        // if(window.uploader.support){
+        //   const menuItem = {}
+        //   menuItem['name'] = '上传文件'
+        //   this.actionsMenus.push(menuItem)
+        // }
+        // if(window.uploader.supportDirectory){
+        //   const menuItem = {}
+        //   menuItem['name'] = '上传文件夹'
+        //   this.actionsMenus.push(menuItem)
+        // }
       },
       handleLink(item, index, isPushLink) {
 
@@ -285,7 +300,6 @@
               this.path += '/' + this.pathList[number].folder
             }
           })
-          setPath(this.path, this.pathList)
           if(isPushLink){
             this.$router.push(`/_m?path=${this.path}`)
           }
@@ -326,6 +340,7 @@
             res.data.forEach(file => {
               this.fileList.push(file)
             });
+            this.addEventListener()
           }else{
             this.fileList = res.data
           }
@@ -404,10 +419,7 @@
           item2['index'] = this.pathList.length
           this.pathList[this.pathList.length - 1] = item1
           this.pathList.push(item2)
-          console.log('path',this.path)
-          console.log('pathList',this.pathList)
           this.$router.push(`/_m?path=${this.path}`)
-          setPath(this.path, this.pathList)
           this.getFileList()
         } else {
           // 打开文件
@@ -419,6 +431,96 @@
       onCancel() {
         this.actionSheetShow = false;
       },
+      // 选择上传文件菜单
+      selectActionsMenus(action,index) {
+        const that = this
+        setTimeout(function () {
+          that.actionSheetShow = false
+        },100)
+        // 新建文件夹
+        if(action.name === '新建文件夹'){
+          this.newFolderName = '新建文件夹'
+          let append = 0
+          let filenameList = []
+          this.fileList.forEach(file => {
+            filenameList.push(file.name)
+          })
+          while(filenameList.includes(this.newFolderName)){
+            append += 1
+            this.newFolderName = '新建文件夹' + append
+          }
+          this.showNewFolder = true
+          const that = this
+          setTimeout(function () {
+            that.$refs.newFolderInput.focus()
+          },0)
+        }
+
+        // 上传文件
+        if(action.name === '上传文件'){
+          // 打开文件选择框
+          Bus.$emit('openUploader', {
+            // 传入的参数
+            currentDirectory: this.path,
+            username: this.$store.state.user.name,
+            userId: this.$store.state.user.userId
+          })
+        }
+
+        // 上传文件夹
+        if(action.name === '上传文件夹'){
+          // 打开文件夹选择框
+          console.log('selectFolder')
+          Bus.$emit('uploadFolder', {
+            // 传入的参数
+            currentDirectory: this.path,
+            username: this.$store.state.user.name,
+            userId: this.$store.state.user.userId
+          })
+        }
+      },
+      // 新建文件夹
+      newFolderNameClick() {
+        console.log('user', this.$store.state.user);
+        this.newFolderLoading = true
+        if(this.newFolderName){
+          api.uploadFolder({
+            isFolder: true,
+            filename: this.newFolderName,
+            currentDirectory: this.path,
+            username: this.$store.state.user.name,
+            userId: this.$store.state.user.userId
+          }).then((res) => {
+            if(res.data === 1){
+              this.newFolderLoading = false
+              this.$message({
+                message: '该文件夹已存在',
+                type: 'warning'
+              });
+            } else {
+              this.newFolderLoading = false
+              this.showNewFolder = false
+              this.isShowNewFolder = false
+              this.$notify({
+                title: '新建文件夹成功',
+                type: 'success',
+                duration: 1000
+              })
+              if (this.listModeSearch) {
+                this.getFileListBySearchMode()
+              } else {
+                this.getFileList()
+              }
+            }
+          })
+        }else{
+          this.newFolderLoading = false
+          this.$message({
+            message: '请输入文件夹名称',
+            type: 'warning'
+          });
+        }
+      },
       swipeUp() {
         this.test = 10
         console.log(67)
@@ -587,4 +689,7 @@
     height: 2rem;
     vertical-align: middle;
   }
+  .new-folder-input /deep/ .van-field__body{
+    height: 40px;
+  }
 </style>

src/views/upload/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <!-- 背景图高斯模糊效果 -->
+  <div class="bgFilter">
+    <div class="box">
+      <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582723247&t=3060bfc4978e78d3accef89c1eb7dc8e" alt="img" class="bg">
+      <div class="content">
+        <!-- <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582723247&t=3060bfc4978e78d3accef89c1eb7dc8e" alt="img"> -->
+        <div class="text">我是文字我是文字我是文字</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: "bgFilter"
+  };
+</script>
+<style lang="scss" scoped>
+  .bgFilter {
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    .box {
+      width: 700px;
+      height: 500px;
+      position: relative;
+      // 我是模糊的背景
+      .bg {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        overflow: hidden;
+        -webkit-filter: blur(8px);
+        -moz-filter: blur(8px);
+        -o-filter: blur(8px);
+        -ms-filter: blur(8px);
+        filter: blur(8px);
+      }
+      // 我是图片和上面的文字
+      .content {
+        .text {
+          width: 100%;
+          padding: 30px;
+          box-sizing: border-box;
+          background-color: rgba(255, 255, 255, 0.7);
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 1;
+          text-align: right;
+        }
+        img {
+          position: absolute;
+          top: 50%;
+          left: 5%;
+          transform: translate(0, -50%);
+          z-index: 2;
+        }
+      }
+    }
+  }
+</style>

src/views/upload/mobile/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="container">
+
+    <van-list>
+      <van-sticky :offset-top="0">
+        <van-nav-bar
+          title="文件上传列表"
+          left-text="返回"
+          left-arrow
+          @click-left="onClickLeft">
+        </van-nav-bar>
+
+      </van-sticky>
+
+      <ul class="file-list">
+        <li v-for="file in fileList" :key="file.id">
+          <uploader-file ref="files" :class="'file_' + file.id" :file="file" :list="true"></uploader-file>
+        </li>
+        <div v-if="!fileList.length" class="no-file"><i class="iconfont icon-empty-file"></i> 暂无待上传文件</div>
+      </ul>
+    </van-list>
+  </div>
+</template>
+<script>
+
+  import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
+  import IconFile from "../../../components/Icon/IconFile";
+  import Bus from '@/assets/js/bus'
+  export default {
+    components: {IconFile},
+    data() {
+      return {
+        fileList: []
+      };
+    },
+    mounted(){
+      console.log('window.uploader',window.uploader)
+      this.fileList = window.uploader.fileList
+    },
+    destroyed(){
+      window.removeEventListener('popstate', this.goBack, false);
+    },
+    methods: {
+      onClickLeft() {
+        this.$router.push(`/_m`)
+        Bus.$emit('uploadFileListBack', true)
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  /deep/ .uploader-file-info {
+    font-size: 14px;
+  }
+  /deep/ .uploader-file-name {
+    width: 50%;
+  }
+  /deep/ .uploader-file-status {
+    width: 30%;
+    span {
+      span {
+        display: none;
+      }
+      i {
+        display: none;
+      }
+    }
+  }
+  /deep/ .uploader-file-size {
+    display: none;
+  }
+  /deep/ .uploader-file-meta {
+    display: none;
+  }
+  /deep/ .uploader-file-actions {
+    width: 20%;
+    span {
+      padding: 10px;
+      margin-right: 16px;
+    }
+  }
+</style>