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'
|
||||
|
||||
|
||||
//
|
||||
// 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')
|
||||
var webpack = require('webpack')
|
||||
const path = require('path')
|
||||
const merge = require('webpack-merge')
|
||||
const webpack = require('webpack')
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
example: ['./example'],
|
||||
},
|
||||
const packageInfo = require('./package')
|
||||
|
||||
output: {
|
||||
path: './dist',
|
||||
publicPath: '/dist/',
|
||||
filename: "[name].js",
|
||||
// target: 'node',
|
||||
},
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
|
||||
|
||||
const isDev = process.env.NODE_ENV === 'development'
|
||||
|
||||
resolve: {
|
||||
root: path.join(__dirname, 'node_modules'),
|
||||
extensions: ['', '.js', '.vue', '.json'],
|
||||
},
|
||||
|
||||
externals: {
|
||||
vue: 'Vue',
|
||||
vuex: 'Vuex',
|
||||
},
|
||||
function baseConfig() {
|
||||
let config = {
|
||||
output: {
|
||||
path: path.join(__dirname, 'dist'),
|
||||
publicPath: '/dist',
|
||||
filename: '[name].js',
|
||||
chunkFilename: '[chunkhash:8].[name].chunk.js',
|
||||
},
|
||||
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue'
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json'
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
loader: 'vue-html'
|
||||
resolve: {
|
||||
modules: [
|
||||
path.join(__dirname, 'node_modules'),
|
||||
],
|
||||
|
||||
alias: {
|
||||
'vue-upload-component': path.join(__dirname, 'src'),
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
loader: 'url',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: '[name].[ext]?[hash]'
|
||||
|
||||
extensions: [
|
||||
'.js',
|
||||
'.jsx',
|
||||
'.json',
|
||||
'.vue',
|
||||
'.md',
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
externals: {
|
||||
vue: 'Vue',
|
||||
vuex: 'Vuex',
|
||||
'vue-router': 'VueRouter',
|
||||
'vue-i18n': 'VueI18n',
|
||||
'marked': 'marked',
|
||||
'highlight.js': 'hljs',
|
||||
'cropperjs': 'Cropper',
|
||||
},
|
||||
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
[
|
||||
'env',
|
||||
{
|
||||
modules: false
|
||||
}
|
||||
],
|
||||
'stage-0',
|
||||
],
|
||||
plugins: [
|
||||
[
|
||||
'transform-runtime',
|
||||
{
|
||||
helpers: false,
|
||||
polyfill: false,
|
||||
regenerator: true,
|
||||
moduleName: 'babel-runtime'
|
||||
}
|
||||
]
|
||||
],
|
||||
|
||||
cacheDirectory: isDev
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'eslint-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(md|txt)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'raw-loader',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
preserveWhitespace: false,
|
||||
loaders: {
|
||||
js: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
[
|
||||
'env',
|
||||
{
|
||||
modules: false
|
||||
}
|
||||
],
|
||||
'stage-0'
|
||||
],
|
||||
cacheDirectory: isDev
|
||||
}
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'eslint-loader',
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new webpack.BannerPlugin(`Name: ${packageInfo.name}\nVersion: ${packageInfo.version}\nAuthor: ${packageInfo.author}`),
|
||||
],
|
||||
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'),
|
||||
],
|
||||
},
|
||||
|
||||
babel: {
|
||||
presets: ['es2015', 'stage-0'],
|
||||
plugins: ['transform-runtime'],
|
||||
output: {
|
||||
path: path.join(__dirname, 'docs/dist'),
|
||||
},
|
||||
|
||||
devServer: {
|
||||
// host: '172.16.23.1',
|
||||
before(app) {
|
||||
let id = 1000000
|
||||
let put = function (req, res) {
|
||||
setTimeout(function () {
|
||||
let rand = Math.random()
|
||||
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))
|
||||
}
|
||||
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,
|
||||
noInfo: true
|
||||
overlay: {
|
||||
warnings: true,
|
||||
errors: true
|
||||
},
|
||||
// host: '172.16.23.1'
|
||||
},
|
||||
devtool: 'eval-source-map'
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports.devtool = 'source-map'
|
||||
// http://vuejs.github.io/vue-loader/workflow/production.html
|
||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
|
||||
new webpack.optimize.OccurenceOrderPlugin()
|
||||
])
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in new issue