lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加移动端文件上传

Browse Source
This commit is contained in:
jmal 2020-02-25 18:01:12 +08:00
parent 2a7a27e8e4
commit 74753f3836
8 changed files with 388 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -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) {

48
src/components/SimpleUploader/globalUploader.vue
View File

@ -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: '成功了',
error: '出错了',
success: '上传成功',
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',
'bottom': '20px',
'width': '92px',
'height': '92px',
'right': right,
'bottom': bottom,
'width': width,
'height': height,
}
that.filePanel = {
'color': 'white',

2
src/layout/components/Navbar.vue
View File

@ -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: {

5
src/main.js
View File

@ -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)

12
src/router/index.js
View File

@ -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: '上传文件列表' }
}]
}
]

263
src/views/home/mobile/index.vue
View File

@ -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">
<van-tabbar
id="tabbar"
active-color="#07c160"
inactive-color="#000"
v-model="tabActive"
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-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-setting" /><div class="tab-text">设置</div></van-tabbar-item>
</van-tabbar>
</div>
<div v-if="diffTabbarTop < 0">
<van-tabbar
id="tabbar"
v-if="isiPhoneX === 30"
active-color="#07c160"
inactive-color="#000"
v-model="tabActive"
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-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-setting" /><div class="tab-text">设置</div></van-tabbar-item>
</van-tabbar>
<!--<div v-if="diffTabbarTop === 0 || diffTabbarTop > 0">-->
<!--<van-tabbar-->
<!--id="tabbar"-->
<!--active-color="#07c160"-->
<!--inactive-color="#000"-->
<!--v-model="tabActive"-->
<!--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-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-setting" /><div class="tab-text">设置</div></van-tabbar-item>-->
<!--</van-tabbar>-->
<!--</div>-->
<!--<div v-if="diffTabbarTop < 0">-->
<!--<van-tabbar-->
<!--id="tabbar"-->
<!--v-if="isiPhoneX === 30"-->
<!--active-color="#07c160"-->
<!--inactive-color="#000"-->
<!--v-model="tabActive"-->
<!--class="tab-bottom-iphoneX">-->
<!--<van-tabbar-item><svg-icon icon-class="tab-folder" /><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-setting" /><div class="tab-text">设置</div></van-tabbar-item>-->
<!--</van-tabbar>-->
<van-tabbar
id="tabbar"
v-if="isiPhoneX === 35"
active-color="#07c160"
inactive-color="#000"
v-model="tabActive"
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-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-setting" /><div class="tab-text">设置</div></van-tabbar-item>
</van-tabbar>
</div>
<!--<van-tabbar-->
<!--id="tabbar"-->
<!--v-if="isiPhoneX === 35"-->
<!--active-color="#07c160"-->
<!--inactive-color="#000"-->
<!--v-model="tabActive"-->
<!--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-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-setting" /><div class="tab-text">设置</div></van-tabbar-item>-->
<!--</van-tabbar>-->
<!--</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: [
{ name: '上传文件' },
{ name: '上传文件夹' },
{ name: '新建文件夹' }
actionsMenus: [
{ 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
console.log('titleRightClick')
Toast("提示").setDefaultOptions({ duration: 200 });
// 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>

65
src/views/upload/index.vue Normal file
View File

@ -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>

82
src/views/upload/mobile/index.vue Normal file
View File

@ -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>