git
8 years ago
parent
24bb304a8f
commit
4207dc0665
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,34 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.file-uploads {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.file-uploads.file-uploads-html4 input[type="file"] {
|
||||||
|
opacity: 0;
|
||||||
|
font-size: 20em;
|
||||||
|
z-index: 1;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.file-uploads.file-uploads-html5 input[type="file"] {
|
||||||
|
overflow: hidden;
|
||||||
|
position: fixed;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
z-index: -1;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,30 @@
|
|||||||
|
export default {
|
||||||
|
header: {
|
||||||
|
logo: 'Vuejs',
|
||||||
|
home: 'Home',
|
||||||
|
examples: 'Examples',
|
||||||
|
documents: 'Documentation',
|
||||||
|
blog: 'Blog',
|
||||||
|
locale: 'Language(语言)',
|
||||||
|
issues: 'Issues',
|
||||||
|
github: 'Github',
|
||||||
|
},
|
||||||
|
|
||||||
|
locale: {
|
||||||
|
en: 'English',
|
||||||
|
'zh-cn': '中文(简体)',
|
||||||
|
},
|
||||||
|
|
||||||
|
document: {
|
||||||
|
title: 'Documentation',
|
||||||
|
},
|
||||||
|
|
||||||
|
example: {
|
||||||
|
full: 'Full',
|
||||||
|
simple: 'Simple',
|
||||||
|
avatar: 'Avatar',
|
||||||
|
drag: 'Drag',
|
||||||
|
multiple: 'Multiple',
|
||||||
|
vuex: 'Vuex',
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
// import Vue from 'vue'
|
||||||
|
import VueI18n from 'vue-i18n'
|
||||||
|
import en from './en'
|
||||||
|
import zhCN from './zh-cn'
|
||||||
|
|
||||||
|
// Vue.use(VueI18n)
|
||||||
|
|
||||||
|
export default new VueI18n({
|
||||||
|
locale: 'en',
|
||||||
|
messages: {
|
||||||
|
'zh-cn': zhCN,
|
||||||
|
en,
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
export default {
|
||||||
|
header: {
|
||||||
|
logo: 'Vuejs',
|
||||||
|
home: '首页',
|
||||||
|
examples: '演示',
|
||||||
|
documents: '文档',
|
||||||
|
blog: 'Blog',
|
||||||
|
locale: 'Language(语言)',
|
||||||
|
issues: 'Issues',
|
||||||
|
github: 'Github',
|
||||||
|
},
|
||||||
|
|
||||||
|
locale: {
|
||||||
|
en: 'English',
|
||||||
|
'zh-cn': '中文(简体)',
|
||||||
|
},
|
||||||
|
|
||||||
|
document: {
|
||||||
|
title: '文档',
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
example: {
|
||||||
|
full: '完整例子',
|
||||||
|
simple: '简单例子',
|
||||||
|
avatar: '头像例子',
|
||||||
|
drag: '拖拽例子',
|
||||||
|
multiple: '多实例',
|
||||||
|
vuex: 'Vuex',
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>vue-upload-component- Upload Component - Uploader</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0-beta/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
|
||||||
|
<link href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-light.min.css" rel="stylesheet" />
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue-i18n/dist/vue-i18n.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.js"></script>
|
||||||
|
|
||||||
|
<script src="./dist/index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,131 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import marked from 'marked'
|
||||||
|
import highlightjs from 'highlight.js'
|
||||||
|
import store from './store'
|
||||||
|
import router from './router'
|
||||||
|
import i18n from './i18n'
|
||||||
|
import App from './views/App'
|
||||||
|
|
||||||
|
Vue.config.silent = false
|
||||||
|
Vue.config.devtools = true
|
||||||
|
|
||||||
|
|
||||||
|
class Renderer extends marked.Renderer {
|
||||||
|
heading(text, level, raw) {
|
||||||
|
let rawName = raw.toLowerCase().replace(/([\u0000-\u002F\u003A-\u0060\u007B-\u007F]+)/g, '-').replace(/^\-+|\-+$/, '')
|
||||||
|
|
||||||
|
if (!this.options.headers) {
|
||||||
|
this.options.headers = []
|
||||||
|
}
|
||||||
|
while (this.options.headers.length >= level) {
|
||||||
|
this.options.headers.pop()
|
||||||
|
}
|
||||||
|
let parent = this.options.headers.filter(value => !!value).join('-')
|
||||||
|
if (parent) {
|
||||||
|
parent = parent + '-'
|
||||||
|
}
|
||||||
|
while (this.options.headers.length < (level - 1)) {
|
||||||
|
this.options.headers.push('')
|
||||||
|
}
|
||||||
|
this.options.headers.push(rawName)
|
||||||
|
return '<h'
|
||||||
|
+ level
|
||||||
|
+ ' id="'
|
||||||
|
+ this.options.headerPrefix
|
||||||
|
+ parent
|
||||||
|
+ rawName
|
||||||
|
+ '">'
|
||||||
|
+ text
|
||||||
|
+ '</h'
|
||||||
|
+ level
|
||||||
|
+ '>\n'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
marked.setOptions({
|
||||||
|
renderer: new Renderer(),
|
||||||
|
gfm: true,
|
||||||
|
tables: true,
|
||||||
|
breaks: false,
|
||||||
|
pedantic: false,
|
||||||
|
sanitize: false,
|
||||||
|
smartLists: true,
|
||||||
|
smartypants: false,
|
||||||
|
highlight(code, lang) {
|
||||||
|
if (lang) {
|
||||||
|
return highlightjs.highlight(lang, code).value
|
||||||
|
} else {
|
||||||
|
return highlightjs.highlightAuto(code).value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
Vue.directive('markdown', function (el, binding, vnode) {
|
||||||
|
if (!el.className || !/vue-markdown/.test(el.className)) {
|
||||||
|
el.className += ' vue-markdown'
|
||||||
|
}
|
||||||
|
let text = ''
|
||||||
|
for (let i = 0; i < vnode.children.length; i++) {
|
||||||
|
text += vnode.children[i].text || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
el.innerHTML = marked(text)
|
||||||
|
let selectorList = el.querySelectorAll('a')
|
||||||
|
for (let i = 0; i < selectorList.length; i++) {
|
||||||
|
selectorList[i].onclick = function (e) {
|
||||||
|
if (e.metaKey || e.ctrlKey || e.shiftKey) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (e.defaultPrevented) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (e.button !== undefined && e.button !== 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.host !== window.location.host) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let href = this.getAttribute('href')
|
||||||
|
if (!href) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (href.charAt(0) !== '#') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault()
|
||||||
|
router.push(href)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Vue.filter('formatSize', function (size) {
|
||||||
|
if (size > 1024 * 1024 * 1024 * 1024) {
|
||||||
|
return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB'
|
||||||
|
} else if (size > 1024 * 1024 * 1024) {
|
||||||
|
return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
|
||||||
|
} else if (size > 1024 * 1024) {
|
||||||
|
return (size / 1024 / 1024).toFixed(2) + ' MB'
|
||||||
|
} else if (size > 1024) {
|
||||||
|
return (size / 1024).toFixed(2) + ' KB'
|
||||||
|
}
|
||||||
|
return size.toString() + ' B'
|
||||||
|
})
|
||||||
|
|
||||||
|
Vue.filter('toLocale', function (to) {
|
||||||
|
return '/' + i18n.locale + to
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
store,
|
||||||
|
router,
|
||||||
|
i18n,
|
||||||
|
...App
|
||||||
|
}).$mount('#app')
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
// import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
|
||||||
|
import i18n from './i18n'
|
||||||
|
import RouterComponent from './views/Router'
|
||||||
|
import DocumentComponent from './views/Document'
|
||||||
|
import ExampleComponent from './views/Example'
|
||||||
|
|
||||||
|
import FullExampleComponent from './views/examples/Full'
|
||||||
|
import SimpleExampleComponent from './views/examples/Simple'
|
||||||
|
import AvatarExampleComponent from './views/examples/Avatar'
|
||||||
|
import DragExampleComponent from './views/examples/Drag'
|
||||||
|
import MultipleExampleComponent from './views/examples/Multiple'
|
||||||
|
import VuexExampleComponent from './views/examples/Vuex'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Vue.use(VueRouter)
|
||||||
|
|
||||||
|
|
||||||
|
let examples = [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: FullExampleComponent,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'full',
|
||||||
|
component: FullExampleComponent,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'simple',
|
||||||
|
component: SimpleExampleComponent,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'avatar',
|
||||||
|
component: AvatarExampleComponent,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'drag',
|
||||||
|
component: DragExampleComponent,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'multiple',
|
||||||
|
component: MultipleExampleComponent,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'vuex',
|
||||||
|
component: VuexExampleComponent,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'hash',
|
||||||
|
fallback: false,
|
||||||
|
scrollBehavior() {
|
||||||
|
return { y: 0 }
|
||||||
|
},
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/:locale(' + Object.keys(i18n.messages).join('|') + ')?',
|
||||||
|
component: RouterComponent,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'documents',
|
||||||
|
component: DocumentComponent,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'examples',
|
||||||
|
component: ExampleComponent,
|
||||||
|
children: examples,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: ExampleComponent,
|
||||||
|
children: examples,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export default router
|
||||||
@ -1,7 +1,6 @@
|
|||||||
import Vue from 'vue'
|
// import Vue from 'vue'
|
||||||
import Vuex from 'vuex'
|
import Vuex from 'vuex'
|
||||||
|
//
|
||||||
|
|
||||||
// Vue.use(Vuex)
|
// Vue.use(Vuex)
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,192 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<header id="header" class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||||
|
<router-link :exact="true" class="navbar-brand" :to="'/' | toLocale">{{$t('header.logo')}}</router-link>
|
||||||
|
<button class="navbar-toggler" type="button" @click.prevent="showNav = !showNav">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<nav :class="{collapse: true, 'navbar-collapse': true, show: showNav}" id="navbar">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link active-class="active" :exact="true" :class="'nav-link' + ($route.path === '/' ? ' active' : '')" :to="'/' | toLocale">{{$t('header.home')}}</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link active-class="active" class="nav-link" :to="'/documents' | toLocale">{{$t('header.documents')}}</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link active-class="active" class="nav-link" :to="'/examples' | toLocale">{{$t('header.examples')}}</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a rel="license noopener" class="nav-link" href="https://www.lianyue.org" target="_blank">{{$t('header.blog')}}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="navbar-nav ml-md-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" @click.prevent="onLocale(true)" @focus="onLocale(true)" @blur="onLocale(false)">
|
||||||
|
{{$t('header.locale')}}
|
||||||
|
</a>
|
||||||
|
<div :class="{'dropdown-menu': true, show: showLocale}" @blur="onLocale(false)">
|
||||||
|
<router-link class="dropdown-item" :to="'/' + name + ($route.params.locale ? $route.fullPath.substr($route.params.locale.length + 1) : $route.fullPath)" v-for="(value, name) in locale" :key="name">{{value}}</router-link>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="https://github.com/lian-yue/vue-upload-component/issues">
|
||||||
|
{{$t('header.issues')}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="https://github.com/lian-yue/vue-upload-component">
|
||||||
|
{{$t('header.github')}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
#header {
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1071;
|
||||||
|
}
|
||||||
|
#sidebar {
|
||||||
|
background: #fff;
|
||||||
|
border-right: 1px solid #e5e5e5;
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
#sidebar {
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
top: 3.5rem;
|
||||||
|
z-index: 1000;
|
||||||
|
max-height: calc(100vh - 3.5rem);
|
||||||
|
border-right: 1px solid #e5e5e5;
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-nav {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin-right: -15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
#sidebar-nav .nav {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-nav .nav .nav-item .nav {
|
||||||
|
display: none;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
#sidebar-nav .nav .nav-item .nav {
|
||||||
|
display: none;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-nav .nav .nav-item.active .nav, #sidebar-nav .nav .active + .nav {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
#sidebar-nav .nav .nav-item .nav {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-nav .nav .nav-link.active, #sidebar-nav .nav .active > .nav-link{
|
||||||
|
color: #262626;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-nav .nav-item .nav-link {
|
||||||
|
padding: .25rem 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-nav .nav-item .nav-item .nav-link {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 85%;
|
||||||
|
margin-left: 1rem
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
padding-top: 1rem;
|
||||||
|
margin-bottom: 2rem
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
padding: 0 1em;
|
||||||
|
color: #6a737d;
|
||||||
|
border-left: 0.25em solid #dfe2e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
padding: 16px;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 85%;
|
||||||
|
line-height: 1.45;
|
||||||
|
background-color: #f6f8fa;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-backdrop.fade {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.modal-backdrop.fade.show {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade.show {
|
||||||
|
display: block;
|
||||||
|
z-index: 1072;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showLocale: false,
|
||||||
|
showNav: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeCreate() {
|
||||||
|
if (this.$route.params.locale && this.$route.params.locale !== this.$i18n.locale) {
|
||||||
|
this.$i18n.locale = this.$route.params.locale
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeUpdate() {
|
||||||
|
if (this.$route.params.locale && this.$route.params.locale !== this.$i18n.locale) {
|
||||||
|
this.$i18n.locale = this.$route.params.locale
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
locale() {
|
||||||
|
let i18n = this.$i18n
|
||||||
|
return i18n.messages[i18n.locale].locale
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onLocale(show) {
|
||||||
|
if (show) {
|
||||||
|
this.showLocale = show
|
||||||
|
} else {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showLocale = show
|
||||||
|
}, 128)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row flex-xl-nowrap">
|
||||||
|
<div class="col-12 col-md-3 col-xl-2" id="sidebar">
|
||||||
|
<nav id="sidebar-nav" class="collapse show">
|
||||||
|
<ul class="nav">
|
||||||
|
<li :class="{'nav-item': true, active: (!$route.hash && !index) || $route.hash.indexOf(group.hash) === 1}" v-for="(group, index) in navs">
|
||||||
|
<router-link active-class="active" :class="{'nav-link': true, active: $route.hash.indexOf(group.hash) === 1}" :to="'#' + group.hash">{{group.name}}</router-link>
|
||||||
|
<ul class="nav" v-if="group.children.length">
|
||||||
|
<li class="nav-item" v-for="child in group.children">
|
||||||
|
<router-link active-class="active" class="nav-link" :to="'#' + group.hash + '-' + child.hash">{{child.name}}</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<main class="col-12 col-md-9 col-xl-10 py-md-3 pr-md-5 pl-md-5" id="main" role="main">
|
||||||
|
<h1 class="document-title" id="document-title">{{$t('document.title')}}</h1>
|
||||||
|
<div class="document-content" v-markdown>{{document}}</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
.document-title {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
.document-content h2 {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin-top: 4rem;
|
||||||
|
border-bottom: 1px solid #eaecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-content h2:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.document-content h2 + h3 {
|
||||||
|
margin-top: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-content h3 {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
import marked from 'marked'
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
document() {
|
||||||
|
return require('../docs/' + this.$i18n.locale)
|
||||||
|
},
|
||||||
|
|
||||||
|
navs() {
|
||||||
|
let tokens = marked.lexer(this.document)
|
||||||
|
let rootNode = {
|
||||||
|
name: '',
|
||||||
|
children: [],
|
||||||
|
level: 1,
|
||||||
|
}
|
||||||
|
let parent = rootNode
|
||||||
|
let navPrev
|
||||||
|
for (let i = 0; i < tokens.length; i++) {
|
||||||
|
let token = tokens[i]
|
||||||
|
if (token.type !== 'heading') {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
let nav = {
|
||||||
|
name: token.text,
|
||||||
|
hash: token.text.toLowerCase().replace(/([\u0000-\u002F\u003A-\u0060\u007B-\u007F]+)/g, '-').replace(/^\-+|\-+$/, ''),
|
||||||
|
level: token.depth,
|
||||||
|
children: [],
|
||||||
|
}
|
||||||
|
if (!navPrev || nav.level === navPrev.level) {
|
||||||
|
// empty
|
||||||
|
} else if (nav.level > navPrev.level) {
|
||||||
|
// next
|
||||||
|
parent = navPrev
|
||||||
|
} else {
|
||||||
|
while (nav.level < navPrev.level && navPrev.parent) {
|
||||||
|
navPrev = navPrev.parent
|
||||||
|
parent = navPrev.parent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.parent = parent
|
||||||
|
parent.children.push(nav)
|
||||||
|
navPrev = nav
|
||||||
|
}
|
||||||
|
return rootNode.children
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
/**
|
||||||
|
* [$route description]
|
||||||
|
* @param {[type]} route [description]
|
||||||
|
* @return {[type]} [description]
|
||||||
|
*/
|
||||||
|
$route(route) {
|
||||||
|
if (route.hash) {
|
||||||
|
let el = document.querySelector(route.hash)
|
||||||
|
window.scrollTo(0, el ? el.offsetTop : 0)
|
||||||
|
} else {
|
||||||
|
window.scrollTo(0, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row flex-xl-nowrap">
|
||||||
|
<div class="col-12 col-md-3 col-xl-2" id="sidebar">
|
||||||
|
<nav id="sidebar-nav" class="collapse show">
|
||||||
|
<ul class="nav">
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link active-class="active" class="nav-link" :to="'/examples/full' | toLocale">{{$t('example.full')}}</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link active-class="active" class="nav-link" :to="'/examples/simple' | toLocale">{{$t('example.simple')}}</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link active-class="active" class="nav-link" :to="'/examples/avatar' | toLocale">{{$t('example.avatar')}}</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link active-class="active" class="nav-link" :to="'/examples/drag' | toLocale">{{$t('example.drag')}}</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link active-class="active" class="nav-link" :to="'/examples/multiple' | toLocale">{{$t('example.multiple')}}</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link active-class="active" class="nav-link" :to="'/examples/vuex' | toLocale">{{$t('example.vuex')}}</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<main class="col-12 col-md-9 col-xl-10 py-md-3 pr-md-5 pl-md-5" id="main" role="main"><router-view></router-view></main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
<router-view></router-view>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<div class="example-avatar">
|
||||||
|
No content
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<div class="example-drag">
|
||||||
|
No content
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -0,0 +1,602 @@
|
|||||||
|
<template>
|
||||||
|
<div class="example-full">
|
||||||
|
<button type="button" class="btn btn-danger float-right btn-is-option" @click.prevent="isOption = !isOption">
|
||||||
|
<i class="fa fa-cog" aria-hidden="true"></i>
|
||||||
|
Options
|
||||||
|
</button>
|
||||||
|
<h1 id="document-title" class="document-title">Full Example</h1>
|
||||||
|
|
||||||
|
<div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
|
||||||
|
<h3>Drop files to upload</h3>
|
||||||
|
</div>
|
||||||
|
<div class="upload" v-show="!isOption">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>Thumb</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Size</th>
|
||||||
|
<th>Speed</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-if="!files.length">
|
||||||
|
<td colspan="7">
|
||||||
|
<div class="text-center p-5">
|
||||||
|
<h4>Drop files anywhere to upload<br/>or</h4>
|
||||||
|
<label :for="name" class="btn btn-lg btn-primary">Select Files</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr v-for="(file, index) in files" :key="file.id">
|
||||||
|
<td>{{index}}</td>
|
||||||
|
<td>
|
||||||
|
<img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />
|
||||||
|
<span v-else>No Image</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="filename">
|
||||||
|
{{file.name}}
|
||||||
|
</div>
|
||||||
|
<div class="progress" v-if="file.active || file.progress !== '0.00'">
|
||||||
|
<div :class="{'progress-bar': true, 'progress-bar-striped': true, 'bg-danger': file.error, 'progress-bar-animated': file.active}" role="progressbar" :style="{width: file.progress + '%'}">{{file.progress}}%</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>{{file.size | formatSize}}</td>
|
||||||
|
<td>{{file.speed | formatSize}}</td>
|
||||||
|
|
||||||
|
<td v-if="file.error">{{file.error}}</td>
|
||||||
|
<td v-else-if="file.success">success</td>
|
||||||
|
<td v-else-if="file.active">active</td>
|
||||||
|
<td v-else></td>
|
||||||
|
<td>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button">
|
||||||
|
Action
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<a :class="{'dropdown-item': true, disabled: file.active || file.success}" href="#" @click.prevent="file.active || file.success ? false : onEditFileShow(file)">Edit</a>
|
||||||
|
<a :class="{'dropdown-item': true, disabled: !file.active}" href="#" @click.prevent="file.active ? $refs.upload.update(file, {error: 'cancel'}) : false">Cancel</a>
|
||||||
|
|
||||||
|
<a class="dropdown-item" href="#" v-if="file.active" @click.prevent="$refs.upload.update(file, {active: false})">Abort</a>
|
||||||
|
<a class="dropdown-item" href="#" v-else-if="file.error && $refs.upload.features.html5" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">Retry upload</a>
|
||||||
|
<a :class="{'dropdown-item': true, disabled: file.success}" href="#" v-else @click.prevent="file.success ? false : $refs.upload.update(file, {active: true})">Upload</a>
|
||||||
|
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="example-foorer">
|
||||||
|
<div class="footer-status float-right">
|
||||||
|
Drop: {{$refs.upload ? $refs.upload.drop : false}},
|
||||||
|
Active: {{$refs.upload ? $refs.upload.active : false}},
|
||||||
|
Uploaded: {{$refs.upload ? $refs.upload.uploaded : true}},
|
||||||
|
Drop active: {{$refs.upload ? $refs.upload.dropActive : false}}
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<file-upload class="btn btn-primary dropdown-toggle"
|
||||||
|
:post-action="postAction"
|
||||||
|
:put-action="putAction"
|
||||||
|
:extensions="extensions"
|
||||||
|
:accept="accept"
|
||||||
|
:multiple="multiple"
|
||||||
|
:directory="directory"
|
||||||
|
:size="size || 0"
|
||||||
|
:thread="thread < 1 ? 1 : (thread > 5 ? 5 : thread)"
|
||||||
|
:headers="headers"
|
||||||
|
:data="data"
|
||||||
|
:drop="drop"
|
||||||
|
:drop-directory="dropDirectory"
|
||||||
|
v-model="files"
|
||||||
|
@input-filter="inputFilter"
|
||||||
|
@input-file="inputFile"
|
||||||
|
ref="upload">
|
||||||
|
<i class="fa fa-plus"></i>
|
||||||
|
Select
|
||||||
|
</file-upload>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<label class="dropdown-item" :for="name">Add files</label>
|
||||||
|
<a class="dropdown-item" href="#" @click="onAddFolader">Add folder</a>
|
||||||
|
<a class="dropdown-item" href="#" @click.prevent="addData.show = true">Add data</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-success" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">
|
||||||
|
<i class="fa fa-arrow-up" aria-hidden="true"></i>
|
||||||
|
Start Upload
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-danger" v-else @click.prevent="$refs.upload.active = false">
|
||||||
|
<i class="fa fa-stop" aria-hidden="true"></i>
|
||||||
|
Stop Upload
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="option" v-show="isOption">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="accept">Accept:</label>
|
||||||
|
<input type="text" id="accept" class="form-control" v-model="accept">
|
||||||
|
<small class="form-text text-muted">Allow upload mime type</small>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="extensions">Extensions:</label>
|
||||||
|
<input type="text" id="extensions" class="form-control" v-model="extensions">
|
||||||
|
<small class="form-text text-muted">Allow upload file extension</small>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>PUT Upload:</label>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="radio" name="put-action" id="put-action" value="" v-model="putAction"> Off
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="radio" name="put-action" id="put-action" value="/upload/put" v-model="putAction"> On
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<small class="form-text text-muted">After the shutdown, use the POST method to upload</small>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="thread">Thread:</label>
|
||||||
|
<input type="number" max="5" min="1" id="thread" class="form-control" v-model.number="thread">
|
||||||
|
<small class="form-text text-muted">Also upload the number of files at the same time (number of threads)</small>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="size">Max size:</label>
|
||||||
|
<input type="number" min="0" id="size" class="form-control" v-model.number="size">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="minSize">Min size:</label>
|
||||||
|
<input type="number" min="0" id="minSize" class="form-control" v-model.number="minSize">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input type="checkbox" id="drop" class="form-check-input" v-model="drop"> Drop
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<small class="form-text text-muted">Drag and drop upload</small>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input type="checkbox" id="drop-directory" class="form-check-input" v-model="dropDirectory"> Drop directory
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<small class="form-text text-muted">Not checked, filter the dragged folder</small>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input type="checkbox" id="upload-auto" class="form-check-input" v-model="uploadAuto"> Auto start
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<small class="form-text text-muted">Automatically activate upload</small>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<button type="button" class="btn btn-primary btn-lg btn-block" @click.prevent="isOption = !isOption">Confirm</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div :class="{'modal-backdrop': true, 'fade': true, show: addData.show}"></div>
|
||||||
|
<div :class="{modal: true, fade: true, show: addData.show}" id="modal-add-data" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">Add data</h5>
|
||||||
|
<button type="button" class="close" @click.prevent="addData.show = false">
|
||||||
|
<span>×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent="onAddData">
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name">Name:</label>
|
||||||
|
<input type="text" class="form-control" required id="name" placeholder="Please enter a file name" v-model="addData.name">
|
||||||
|
<small class="form-text text-muted">Such as <code>filename.txt</code></small>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="type">Type:</label>
|
||||||
|
<input type="text" class="form-control" required id="type" placeholder="Please enter the MIME type" v-model="addData.type">
|
||||||
|
<small class="form-text text-muted">Such as <code>text/plain</code></small>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="content">Content:</label>
|
||||||
|
<textarea class="form-control" required id="content" rows="3" placeholder="Please enter the file contents" v-model="addData.content"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" @click.prevent="addData.show = false">Close</button>
|
||||||
|
<button type="submit" class="btn btn-primary">Save</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div :class="{'modal-backdrop': true, 'fade': true, show: editFile.show}"></div>
|
||||||
|
<div :class="{modal: true, fade: true, show: editFile.show}" id="modal-edit-file" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog modal-lg" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">Edit file</h5>
|
||||||
|
<button type="button" class="close" @click.prevent="editFile.show = false">
|
||||||
|
<span>×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent="onEditorFile">
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name">Name:</label>
|
||||||
|
<input type="text" class="form-control" required id="name" placeholder="Please enter a file name" v-model="editFile.name">
|
||||||
|
</div>
|
||||||
|
<div class="form-group" v-if="editFile.show && editFile.blob && editFile.type && editFile.type.substr(0, 6) === 'image/'">
|
||||||
|
<label>Image: </label>
|
||||||
|
<div class="edit-image">
|
||||||
|
<img :src="editFile.blob" ref="editImage" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="edit-image-tool">
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button type="button" class="btn btn-primary" @click="editFile.cropper.rotate(-90)" title="cropper.rotate(-90)"><i class="fa fa-undo" aria-hidden="true"></i></button>
|
||||||
|
<button type="button" class="btn btn-primary" @click="editFile.cropper.rotate(90)" title="cropper.rotate(90)"><i class="fa fa-repeat" aria-hidden="true"></i></button>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button type="button" class="btn btn-primary" @click="editFile.cropper.crop()" title="cropper.crop()"><i class="fa fa-check" aria-hidden="true"></i></button>
|
||||||
|
<button type="button" class="btn btn-primary" @click="editFile.cropper.clear()" title="cropper.clear()"><i class="fa fa-remove" aria-hidden="true"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" @click.prevent="editFile.show = false">Close</button>
|
||||||
|
<button type="submit" class="btn btn-primary">Save</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-5">
|
||||||
|
Source code: <a href="https://github.com/lian-yue/vue-upload-component/tree/2.0/docs/views/examples/Full.vue">https://github.com/lian-yue/vue-upload-component/tree/2.0/docs/views/examples/Full.vue</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
.example-full .btn-group .dropdown-menu {
|
||||||
|
display: block;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all .2s
|
||||||
|
}
|
||||||
|
.example-full .btn-group:hover > .dropdown-menu {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-full label.dropdown-item {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-full .btn-group .dropdown-toggle {
|
||||||
|
margin-right: .6rem
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.example-full .filename {
|
||||||
|
margin-bottom: .3rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-full .btn-is-option {
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
.example-full .example-foorer {
|
||||||
|
padding: .5rem 0;
|
||||||
|
border-top: 1px solid #e9ecef;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.example-full .edit-image img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-full .edit-image-tool {
|
||||||
|
margin-top: .6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-full .edit-image-tool .btn-group{
|
||||||
|
margin-right: .6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-full .footer-status {
|
||||||
|
padding-top: .4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-full .drop-active {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9999;
|
||||||
|
opacity: .6;
|
||||||
|
text-align: center;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-full .drop-active h3 {
|
||||||
|
margin: -.5em 0 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
-ms-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 40px;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Cropper from 'cropperjs'
|
||||||
|
import FileUpload from 'vue-upload-component'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FileUpload,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
files: [],
|
||||||
|
accept: 'image/png,image/gif,image/jpeg,image/webp',
|
||||||
|
extensions: 'gif,jpg,jpeg,png,webp',
|
||||||
|
// extensions: ['gif', 'jpg', 'jpeg','png', 'webp'],
|
||||||
|
// extensions: /\.(gif|jpe?g|png|webp)$/i,
|
||||||
|
minSize: 1024,
|
||||||
|
size: 1024 * 1024 * 10,
|
||||||
|
multiple: true,
|
||||||
|
directory: false,
|
||||||
|
drop: true,
|
||||||
|
dropDirectory: true,
|
||||||
|
thread: 3,
|
||||||
|
name: 'file',
|
||||||
|
postAction: '/upload/post',
|
||||||
|
putAction: '/upload/put',
|
||||||
|
headers: {
|
||||||
|
'X-Csrf-Token': 'xxxx',
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
'_csrf_token': 'xxxxxx',
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
uploadAuto: false,
|
||||||
|
isOption: false,
|
||||||
|
|
||||||
|
addData: {
|
||||||
|
show: false,
|
||||||
|
name: '',
|
||||||
|
type: '',
|
||||||
|
content: '',
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
editFile: {
|
||||||
|
show: false,
|
||||||
|
name: '',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
'editFile.show'(newValue, oldValue) {
|
||||||
|
// 关闭了 自动删除 error
|
||||||
|
if (!newValue && oldValue) {
|
||||||
|
this.$refs.upload.update(this.editFile.id, { error: this.editFile.error || '' })
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newValue) {
|
||||||
|
this.$nextTick(function () {
|
||||||
|
if (!this.$refs.editImage) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let cropper = new Cropper(this.$refs.editImage, {
|
||||||
|
autoCrop: false,
|
||||||
|
})
|
||||||
|
this.editFile = {
|
||||||
|
...this.editFile,
|
||||||
|
cropper
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'addData.show'(show) {
|
||||||
|
if (show) {
|
||||||
|
this.addData.name = ''
|
||||||
|
this.addData.type = ''
|
||||||
|
this.addData.content = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
inputFilter(newFile, oldFile, prevent) {
|
||||||
|
if (newFile && !oldFile) {
|
||||||
|
// Before adding a file
|
||||||
|
// 添加文件前
|
||||||
|
|
||||||
|
// Filter system files or hide files
|
||||||
|
// 过滤系统文件 和隐藏文件
|
||||||
|
if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
|
||||||
|
return prevent()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter php html js file
|
||||||
|
// 过滤 php html js 文件
|
||||||
|
if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
|
||||||
|
return prevent()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (newFile && (!oldFile || newFile.file !== oldFile.file)) {
|
||||||
|
|
||||||
|
// Create a blob field
|
||||||
|
// 创建 blob 字段
|
||||||
|
newFile.blob = ''
|
||||||
|
let URL = window.URL || window.webkitURL
|
||||||
|
if (URL && URL.createObjectURL) {
|
||||||
|
newFile.blob = URL.createObjectURL(newFile.file)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Thumbnails
|
||||||
|
// 缩略图
|
||||||
|
newFile.thumb = ''
|
||||||
|
if (newFile.blob && newFile.type.substr(0, 6) === 'image/') {
|
||||||
|
newFile.thumb = newFile.blob
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// add, update, remove File Event
|
||||||
|
inputFile(newFile, oldFile) {
|
||||||
|
if (newFile && oldFile) {
|
||||||
|
// update
|
||||||
|
|
||||||
|
if (newFile.active && !oldFile.active) {
|
||||||
|
// beforeSend
|
||||||
|
|
||||||
|
// min size
|
||||||
|
if (newFile.size >= 0 && this.minSize > 0 && newFile.size < this.minSize) {
|
||||||
|
this.$refs.upload.update(newFile, { error: 'size' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newFile.progress !== oldFile.progress) {
|
||||||
|
// progress
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newFile.error && !oldFile.error) {
|
||||||
|
// error
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newFile.success && !oldFile.success) {
|
||||||
|
// success
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (!newFile && oldFile) {
|
||||||
|
// remove
|
||||||
|
if (oldFile.success && oldFile.response.id) {
|
||||||
|
// $.ajax({
|
||||||
|
// type: 'DELETE',
|
||||||
|
// url: '/upload/delete?id=' + oldFile.response.id,
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Automatically activate upload
|
||||||
|
if (newFile && !oldFile && this.uploadAuto && !this.$refs.upload.active) {
|
||||||
|
this.$refs.upload.active = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
alert(message) {
|
||||||
|
alert(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
onEditFileShow(file) {
|
||||||
|
this.editFile = { ...file, show: true }
|
||||||
|
this.$refs.upload.update(file, { error: 'edit' })
|
||||||
|
},
|
||||||
|
|
||||||
|
async onEditorFile() {
|
||||||
|
if (!this.$refs.upload.features.html5) {
|
||||||
|
this.alert('Your browser does not support')
|
||||||
|
this.editFile.show = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let data = {
|
||||||
|
name: this.editFile.name,
|
||||||
|
}
|
||||||
|
if (this.editFile.cropper) {
|
||||||
|
let blob = await new Promise((resolve, reject) => {
|
||||||
|
this.editFile.cropper.getCroppedCanvas().toBlob(function (value) {
|
||||||
|
resolve(value)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
data.file = new File([blob], data.name, { type: blob.type })
|
||||||
|
data.type = blob.type
|
||||||
|
data.size = blob.size
|
||||||
|
}
|
||||||
|
this.$refs.upload.update(this.editFile.id, data)
|
||||||
|
this.editFile.error = ''
|
||||||
|
this.editFile.show = false
|
||||||
|
},
|
||||||
|
|
||||||
|
// add folader
|
||||||
|
onAddFolader() {
|
||||||
|
if (!this.$refs.upload.features.directory) {
|
||||||
|
this.alert('Your browser does not support')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let input = this.$refs.upload.$el.querySelector('input')
|
||||||
|
input.directory = true
|
||||||
|
input.webkitdirectory = true
|
||||||
|
this.directory = true
|
||||||
|
|
||||||
|
input.onclick = null
|
||||||
|
input.click()
|
||||||
|
input.onclick = (e) => {
|
||||||
|
this.directory = false
|
||||||
|
input.directory = false
|
||||||
|
input.webkitdirectory = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onAddData() {
|
||||||
|
this.addData.show = false
|
||||||
|
if (!this.$refs.upload.features.html5) {
|
||||||
|
this.alert('Your browser does not support')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let file = new window.File([this.addData.content], this.addData.name, {
|
||||||
|
type: this.addData.type,
|
||||||
|
})
|
||||||
|
this.$refs.upload.add(file)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<div class="example-multiple">
|
||||||
|
No content
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<div class="example-simple">
|
||||||
|
No content
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<div class="example-vuex">
|
||||||
|
No content
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,344 +0,0 @@
|
|||||||
<style>
|
|
||||||
.home {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-uploads {
|
|
||||||
font-size: 18px;
|
|
||||||
padding: .6em;
|
|
||||||
font-weight: bold;
|
|
||||||
border: 1px solid #888;
|
|
||||||
background: #f3f3f3
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.drop-active {
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
opacity: .4;
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
padding: .6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
margin-bottom: 2em
|
|
||||||
}
|
|
||||||
table th,table td {
|
|
||||||
padding: .4em;
|
|
||||||
border: 1px solid #ddd
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<main class="home">
|
|
||||||
<div id="lists">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Index</th>
|
|
||||||
<th>ID</th>
|
|
||||||
<th>Image</th>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Size</th>
|
|
||||||
<th>Progress</th>
|
|
||||||
<th>Speed</th>
|
|
||||||
<th>Active</th>
|
|
||||||
<th>Error</th>
|
|
||||||
<th>Success</th>
|
|
||||||
<th>Abort</th>
|
|
||||||
<th>customError</th>
|
|
||||||
<th>Delete</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="(file, index) in files" :key="file.id">
|
|
||||||
<td>{{index}}</td>
|
|
||||||
<td>{{file.id}}</td>
|
|
||||||
<td v-if="file.type.substr(0, 6) == 'image/' && file.blob">
|
|
||||||
<img :src="file.blob" width="50" height="auto" />
|
|
||||||
</td>
|
|
||||||
<td v-else></td>
|
|
||||||
<td>{{file.name}}</td>
|
|
||||||
<td>{{file.size | formatSize}}</td>
|
|
||||||
<td>{{file.progress}}</td>
|
|
||||||
<td>{{file.speed | formatSize}}</td>
|
|
||||||
<td>{{file.active}}</td>
|
|
||||||
<td>{{file.error}}</td>
|
|
||||||
<td>{{file.success}}</td>
|
|
||||||
<td><button type="button" @click.prevent="abort(file)">Abort</button></td>
|
|
||||||
<td><button type="button" @click.prevent="customError(file)">custom error</button></td>
|
|
||||||
<td><button type="button" @click.prevent="remove(file)">x</button></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div id="options">
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<file-upload
|
|
||||||
:post-action="postAction"
|
|
||||||
:put-action="putAction"
|
|
||||||
:extensions="extensions"
|
|
||||||
:accept="accept"
|
|
||||||
:multiple="multiple"
|
|
||||||
:directory="directory"
|
|
||||||
:size="size || 0"
|
|
||||||
:thread="thread < 1 ? 1 : (thread > 5 ? 5 : thread)"
|
|
||||||
:headers="headers"
|
|
||||||
:data="data"
|
|
||||||
:drop="drop"
|
|
||||||
:drop-directory="dropDirectory"
|
|
||||||
v-model="files"
|
|
||||||
@input-filter="inputFilter"
|
|
||||||
@input-file="inputFile"
|
|
||||||
ref="upload">
|
|
||||||
Add upload files
|
|
||||||
</file-upload>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<button @click.prevent="addDirectory">Add upload directory</button>
|
|
||||||
<br/>
|
|
||||||
<span v-show="$refs.upload && !$refs.upload.features.directory">Your browser does not support</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">Start upload</button>
|
|
||||||
<button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">Stop upload</button>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
Auto start: <input type="checkbox" id="checkbox" v-model="auto">
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
Accept: <input type="text" v-model="accept">
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
Extensions: <input type="text" v-model="extensions">
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
Drop: <input type="checkbox" id="checkbox" v-model="drop">
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
Max file size: <input type="text" v-model.number="size">
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
Multiple: <input type="checkbox" id="checkbox" v-model="multiple">
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
Thread: <input type="text" v-model.number="thread">
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
Auto start: {{auto}}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Active: {{$refs.upload ? $refs.upload.active : false}}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Uploaded: {{$refs.upload ? $refs.upload.uploaded : true}}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Drop active: {{$refs.upload ? $refs.upload.dropActive : false}}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label :for="name">Click</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<h1>Allow to drag and drop</h1>
|
|
||||||
<div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
|
|
||||||
Drop ing
|
|
||||||
</div>
|
|
||||||
<br/>
|
|
||||||
<br/>
|
|
||||||
<button type="button" @click.prevent="files = []">Test overwrite files</button>
|
|
||||||
</main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import FileUpload from '../src'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
FileUpload,
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
files: [],
|
|
||||||
accept: 'image/png,image/gif,image/jpeg,image/webp',
|
|
||||||
size: 1024 * 1024 * 10,
|
|
||||||
extensions: 'gif,jpg,jpeg,png,webp',
|
|
||||||
// extensions: ['gif', 'jpg', 'jpeg','png', 'webp'],
|
|
||||||
// extensions: /\.(gif|jpe?g|png|webp)$/i,
|
|
||||||
|
|
||||||
|
|
||||||
multiple: true,
|
|
||||||
directory: false,
|
|
||||||
drop: true,
|
|
||||||
dropDirectory: true,
|
|
||||||
thread: 3,
|
|
||||||
name: 'file',
|
|
||||||
|
|
||||||
postAction: './post.php',
|
|
||||||
putAction: './put.php',
|
|
||||||
|
|
||||||
headers: {
|
|
||||||
"X-Csrf-Token": "xxxx",
|
|
||||||
},
|
|
||||||
|
|
||||||
data: {
|
|
||||||
"_csrf_token": "xxxxxx",
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
auto: false,
|
|
||||||
|
|
||||||
|
|
||||||
// headers: {},
|
|
||||||
// putAction: '',
|
|
||||||
// postAction: 'http://upload.qiniu.com/',
|
|
||||||
// accept: 'image/png,image/gif,image/jpeg,image/webp',
|
|
||||||
// extensions: '',
|
|
||||||
// size: 0,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
auto(auto) {
|
|
||||||
if (auto && !this.$refs.upload.uploaded && !this.$refs.upload.active) {
|
|
||||||
this.$refs.upload.active = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
// add Directory
|
|
||||||
addDirectory() {
|
|
||||||
if (!this.$refs.upload.features.directory) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
let input = this.$refs.upload.$el.querySelector('input')
|
|
||||||
input.directory = true
|
|
||||||
input.webkitdirectory = true
|
|
||||||
this.directory = true
|
|
||||||
|
|
||||||
input.onclick = null
|
|
||||||
input.click()
|
|
||||||
input.onclick = (e) => {
|
|
||||||
this.directory = false
|
|
||||||
input.directory = false
|
|
||||||
input.webkitdirectory = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
// event Filter
|
|
||||||
inputFilter(newFile, oldFile, prevent) {
|
|
||||||
if (newFile && !oldFile) {
|
|
||||||
// 过滤系疼文件 or 隐藏文件
|
|
||||||
if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
|
|
||||||
return prevent()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 过滤 php html js 文件
|
|
||||||
if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
|
|
||||||
return prevent()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建 blob 字段
|
|
||||||
newFile.blob = ''
|
|
||||||
var URL = window.URL || window.webkitURL
|
|
||||||
if (URL && URL.createObjectURL) {
|
|
||||||
newFile.blob = URL.createObjectURL(newFile.file)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
// add, update, remove File Event
|
|
||||||
inputFile(newFile, oldFile) {
|
|
||||||
if (newFile && oldFile) {
|
|
||||||
// console.log('update', newFile, oldFile)
|
|
||||||
|
|
||||||
if (newFile.active && !oldFile.active) {
|
|
||||||
// this.beforeSend(newFile)
|
|
||||||
|
|
||||||
// min size
|
|
||||||
if (newFile.size >= 0 && newFile.size < 100 * 1024) {
|
|
||||||
// newFile = this.$refs.upload.update(newFile, {error: 'size'})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newFile.progress != oldFile.progress) {
|
|
||||||
// this.progress(newFile)
|
|
||||||
// console.log('progress', newFile.progress)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newFile.error && !oldFile.error) {
|
|
||||||
// this.error(newFile)
|
|
||||||
// console.log('error', newFile.error, newFile.response)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newFile.success && !oldFile.success) {
|
|
||||||
// this.success(newFile)
|
|
||||||
// console.log('success', newFile.response)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
if (!newFile && oldFile) {
|
|
||||||
// this.remove(oldFile)
|
|
||||||
// console.log('remove', oldFile)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 自动开始
|
|
||||||
if (newFile && !oldFile && this.auto && !this.$refs.upload.active) {
|
|
||||||
this.$refs.upload.active = true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
abort(file) {
|
|
||||||
this.$refs.upload.update(file, {active: false})
|
|
||||||
// or
|
|
||||||
// this.$refs.upload.update(file, {error: 'abort'})
|
|
||||||
},
|
|
||||||
|
|
||||||
customError(file) {
|
|
||||||
this.$refs.upload.update(file, {error: 'custom'})
|
|
||||||
},
|
|
||||||
remove(file) {
|
|
||||||
this.$refs.upload.remove(file)
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
|
|
||||||
import Home from './Home'
|
|
||||||
|
|
||||||
import store from './store'
|
|
||||||
|
|
||||||
|
|
||||||
Vue.config.silent = false;
|
|
||||||
Vue.config.devtools = true;
|
|
||||||
|
|
||||||
|
|
||||||
Vue.filter('formatSize', function(size) {
|
|
||||||
if (size > 1024 * 1024 * 1024 * 1024) {
|
|
||||||
return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB';
|
|
||||||
} else if (size > 1024 * 1024 * 1024) {
|
|
||||||
return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB';
|
|
||||||
} else if (size > 1024 * 1024) {
|
|
||||||
return (size / 1024 / 1024).toFixed(2) + ' MB';
|
|
||||||
} else if (size > 1024) {
|
|
||||||
return (size / 1024).toFixed(2) + ' KB';
|
|
||||||
}
|
|
||||||
return size.toString() + ' B';
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
new Vue({
|
|
||||||
store,
|
|
||||||
...Home
|
|
||||||
}).$mount('#app')
|
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
import resolve from 'rollup-plugin-node-resolve'
|
||||||
|
import commonjs from 'rollup-plugin-commonjs'
|
||||||
|
import babel from 'rollup-plugin-babel'
|
||||||
|
import uglify from 'rollup-plugin-uglify'
|
||||||
|
import vue from 'rollup-plugin-vue'
|
||||||
|
import packageInfo from './package.json'
|
||||||
|
|
||||||
|
|
||||||
|
// const isDev = process.env.NODE_ENV === 'development'
|
||||||
|
|
||||||
|
|
||||||
|
function baseConfig() {
|
||||||
|
return {
|
||||||
|
output: {
|
||||||
|
format: 'umd',
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
resolve({
|
||||||
|
jsnext: true,
|
||||||
|
main: true,
|
||||||
|
browser: true,
|
||||||
|
}),
|
||||||
|
commonjs({
|
||||||
|
extensions: [
|
||||||
|
'.js',
|
||||||
|
'.jsx',
|
||||||
|
'.json',
|
||||||
|
'.vue'
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
banner: `/*!\n * Name: ${packageInfo.name}\n * Version: ${packageInfo.version}\n * Author: ${packageInfo.author}\n */`,
|
||||||
|
sourcemap: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let config = baseConfig()
|
||||||
|
config.input = 'src/index.js'
|
||||||
|
config.output.file = 'dist/vue-upload-component.js'
|
||||||
|
config.output.name = 'VueUploadComponent'
|
||||||
|
config.plugins.push(
|
||||||
|
vue({
|
||||||
|
autoStyles: false,
|
||||||
|
css: true,
|
||||||
|
}),
|
||||||
|
babel()
|
||||||
|
)
|
||||||
|
|
||||||
|
let configMin = baseConfig()
|
||||||
|
configMin.input = 'src/index.js'
|
||||||
|
configMin.output.file = 'dist/vue-upload-component.min.js'
|
||||||
|
configMin.output.name = 'VueUploadComponent'
|
||||||
|
configMin.plugins.push(
|
||||||
|
vue({
|
||||||
|
autoStyles: false,
|
||||||
|
css: true,
|
||||||
|
}),
|
||||||
|
babel(),
|
||||||
|
uglify({
|
||||||
|
output: {
|
||||||
|
comments: /^!/,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let configPart = baseConfig()
|
||||||
|
configPart.input = 'src/index.js'
|
||||||
|
configPart.output.file = 'dist/vue-upload-component.part.js'
|
||||||
|
configPart.output.name = 'VueUploadComponent'
|
||||||
|
configPart.plugins.push(
|
||||||
|
vue({
|
||||||
|
autoStyles: false,
|
||||||
|
css: 'dist/vue-upload-component.part.css',
|
||||||
|
}),
|
||||||
|
babel()
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = [
|
||||||
|
config,
|
||||||
|
configMin,
|
||||||
|
configPart,
|
||||||
|
]
|
||||||
@ -1 +1 @@
|
|||||||
module.exports = require('./FileUpload.vue');
|
module.exports = require('./FileUpload.vue')
|
||||||
|
|||||||
@ -1,12 +0,0 @@
|
|||||||
var webpack = require('webpack');
|
|
||||||
|
|
||||||
module.exports = require('./webpack.config.js');
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
module.exports.entry = {
|
|
||||||
'vue-upload-component': './src',
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports.output.library = 'VueUploadComponent';
|
|
||||||
module.exports.output.libraryTarget = 'umd';
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
var webpack = require('webpack');
|
|
||||||
|
|
||||||
module.exports = require('./webpack.config.build.js');
|
|
||||||
|
|
||||||
module.exports.output.filename = "[name].min.js";
|
|
||||||
|
|
||||||
module.exports.plugins.push(new webpack.optimize.UglifyJsPlugin({
|
|
||||||
compress: {
|
|
||||||
warnings: false,
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
@ -1,82 +1,195 @@
|
|||||||
var path = require('path')
|
const path = require('path')
|
||||||
var webpack = require('webpack')
|
const merge = require('webpack-merge')
|
||||||
|
const webpack = require('webpack')
|
||||||
|
|
||||||
module.exports = {
|
const packageInfo = require('./package')
|
||||||
entry: {
|
|
||||||
example: ['./example'],
|
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
|
||||||
},
|
|
||||||
|
const isDev = process.env.NODE_ENV === 'development'
|
||||||
|
|
||||||
|
|
||||||
|
function baseConfig() {
|
||||||
|
let config = {
|
||||||
output: {
|
output: {
|
||||||
path: './dist',
|
path: path.join(__dirname, 'dist'),
|
||||||
publicPath: '/dist/',
|
publicPath: '/dist',
|
||||||
filename: "[name].js",
|
filename: '[name].js',
|
||||||
// target: 'node',
|
chunkFilename: '[chunkhash:8].[name].chunk.js',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
resolve: {
|
resolve: {
|
||||||
root: path.join(__dirname, 'node_modules'),
|
modules: [
|
||||||
extensions: ['', '.js', '.vue', '.json'],
|
path.join(__dirname, 'node_modules'),
|
||||||
|
],
|
||||||
|
|
||||||
|
alias: {
|
||||||
|
'vue-upload-component': path.join(__dirname, 'src'),
|
||||||
},
|
},
|
||||||
|
|
||||||
|
extensions: [
|
||||||
|
'.js',
|
||||||
|
'.jsx',
|
||||||
|
'.json',
|
||||||
|
'.vue',
|
||||||
|
'.md',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
externals: {
|
externals: {
|
||||||
vue: 'Vue',
|
vue: 'Vue',
|
||||||
vuex: 'Vuex',
|
vuex: 'Vuex',
|
||||||
|
'vue-router': 'VueRouter',
|
||||||
|
'vue-i18n': 'VueI18n',
|
||||||
|
'marked': 'marked',
|
||||||
|
'highlight.js': 'hljs',
|
||||||
|
'cropperjs': 'Cropper',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
module: {
|
module: {
|
||||||
loaders: [
|
rules: [
|
||||||
{
|
{
|
||||||
test: /\.vue$/,
|
test: /\.jsx?$/,
|
||||||
loader: 'vue'
|
use: [
|
||||||
},
|
{
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
presets: [
|
||||||
|
[
|
||||||
|
'env',
|
||||||
{
|
{
|
||||||
test: /\.js$/,
|
modules: false
|
||||||
loader: 'babel',
|
}
|
||||||
exclude: /node_modules/
|
],
|
||||||
|
'stage-0',
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
[
|
||||||
|
'transform-runtime',
|
||||||
|
{
|
||||||
|
helpers: false,
|
||||||
|
polyfill: false,
|
||||||
|
regenerator: true,
|
||||||
|
moduleName: 'babel-runtime'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
|
||||||
|
cacheDirectory: isDev
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.json$/,
|
loader: 'eslint-loader',
|
||||||
loader: 'json'
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.html$/,
|
test: /\.(md|txt)$/,
|
||||||
loader: 'vue-html'
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'raw-loader',
|
||||||
|
},
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.(png|jpg|gif|svg)$/,
|
test: /\.vue$/,
|
||||||
loader: 'url',
|
use: [
|
||||||
query: {
|
{
|
||||||
limit: 10000,
|
loader: 'vue-loader',
|
||||||
name: '[name].[ext]?[hash]'
|
options: {
|
||||||
|
preserveWhitespace: false,
|
||||||
|
loaders: {
|
||||||
|
js: [
|
||||||
|
{
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
presets: [
|
||||||
|
[
|
||||||
|
'env',
|
||||||
|
{
|
||||||
|
modules: false
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
'stage-0'
|
||||||
|
],
|
||||||
|
cacheDirectory: isDev
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'eslint-loader',
|
||||||
|
},
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
babel: {
|
plugins: [
|
||||||
presets: ['es2015', 'stage-0'],
|
new webpack.BannerPlugin(`Name: ${packageInfo.name}\nVersion: ${packageInfo.version}\nAuthor: ${packageInfo.author}`),
|
||||||
plugins: ['transform-runtime'],
|
],
|
||||||
|
devtool: isDev ? 'eval-source-map' : 'source-map'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isDev) {
|
||||||
|
config.plugins.push(new webpack.HotModuleReplacementPlugin())
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = merge(baseConfig(), {
|
||||||
|
entry: {
|
||||||
|
index: [
|
||||||
|
path.join(__dirname, 'docs/index.js'),
|
||||||
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
devServer: {
|
output: {
|
||||||
// host: '172.16.23.1',
|
path: path.join(__dirname, 'docs/dist'),
|
||||||
historyApiFallback: true,
|
|
||||||
noInfo: true
|
|
||||||
},
|
},
|
||||||
devtool: 'eval-source-map'
|
|
||||||
}
|
|
||||||
|
|
||||||
if (process.env.NODE_ENV === 'production') {
|
devServer: {
|
||||||
module.exports.devtool = 'source-map'
|
before(app) {
|
||||||
// http://vuejs.github.io/vue-loader/workflow/production.html
|
let id = 1000000
|
||||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
let put = function (req, res) {
|
||||||
new webpack.DefinePlugin({
|
setTimeout(function () {
|
||||||
'process.env': {
|
let rand = Math.random()
|
||||||
NODE_ENV: '"production"'
|
if (rand <= 0.1) {
|
||||||
|
res.status(500)
|
||||||
|
res.json({ error: 'server', success: false })
|
||||||
|
} else if (rand <= 0.25) {
|
||||||
|
res.status(403)
|
||||||
|
res.json({ error: 'failure', success: false })
|
||||||
|
} else {
|
||||||
|
res.json({ name: 'filename.ext', id: id++, success: true })
|
||||||
}
|
}
|
||||||
}),
|
}, 200 + parseInt(Math.random() * 4000, 10))
|
||||||
|
}
|
||||||
new webpack.optimize.OccurenceOrderPlugin()
|
let del = function (req, res) {
|
||||||
])
|
res.json({ success: true })
|
||||||
}
|
}
|
||||||
|
app.post('/upload/post', put)
|
||||||
|
app.put('/upload/put', put)
|
||||||
|
app.post('/upload/delete', del)
|
||||||
|
app.delete('/upload/delete', del)
|
||||||
|
},
|
||||||
|
hot: true,
|
||||||
|
contentBase: path.join(__dirname, 'docs'),
|
||||||
|
clientLogLevel: 'error',
|
||||||
|
noInfo: true,
|
||||||
|
publicPath: '/dist',
|
||||||
|
inline: true,
|
||||||
|
historyApiFallback: true,
|
||||||
|
overlay: {
|
||||||
|
warnings: true,
|
||||||
|
errors: true
|
||||||
|
},
|
||||||
|
// host: '172.16.23.1'
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|||||||
Loading…
Reference in new issue