git
9 years ago
parent
e4705d3820
commit
b782af2df7
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 one or more lines are too long
@ -0,0 +1,32 @@
|
|||||||
|
<style>
|
||||||
|
nav {
|
||||||
|
margin-bottom: 1em
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
render(h) {
|
||||||
|
return (
|
||||||
|
<div id="app">
|
||||||
|
<header id="header">
|
||||||
|
<h1>Upload test</h1>
|
||||||
|
<nav>
|
||||||
|
<h3>Navigation</h3>
|
||||||
|
<h3>Need to run local <code>`npm run dev`</code></h3>
|
||||||
|
<ul>
|
||||||
|
<li><router-link to="/">Home</router-link></li>
|
||||||
|
<li><router-link to="/multi">Multi components</router-link></li>
|
||||||
|
<li><router-link to="/cross-router">Cross router</router-link></li>
|
||||||
|
<li><router-link to="/vuex">Vuex</router-link></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<router-view id="main"></router-view>
|
||||||
|
<footer id="footer">
|
||||||
|
<div>Powered by:<a href="//www.lianyue.org">LianYue</a></div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
<style>
|
||||||
|
.cross-router {
|
||||||
|
margin-top: 2em
|
||||||
|
}
|
||||||
|
|
||||||
|
.cross-router .file-uploads {
|
||||||
|
font-size: 18px;
|
||||||
|
padding: .6em;
|
||||||
|
font-weight: bold;
|
||||||
|
border: 1px solid #888;
|
||||||
|
background: #f3f3f3
|
||||||
|
}
|
||||||
|
|
||||||
|
.cross-router button {
|
||||||
|
padding: .6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cross-router .list li {
|
||||||
|
border-bottom: 1px solid #888;
|
||||||
|
}
|
||||||
|
.cross-router .list span {
|
||||||
|
display: inline-block;
|
||||||
|
padding: .4em
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<main class="cross-router">
|
||||||
|
<nav>
|
||||||
|
<h3>Sub navigation</h3>
|
||||||
|
<ul>
|
||||||
|
<li><router-link to="/cross-router">File upload</router-link></li>
|
||||||
|
<li><router-link to="/cross-router/list">File list</router-link></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<keep-alive>
|
||||||
|
<router-view :files="files"></router-view>
|
||||||
|
</keep-alive>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
files: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h2>List</h2>
|
||||||
|
<div class="lists">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Index</th>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Size</th>
|
||||||
|
<th>Progress</th>
|
||||||
|
<th>Speed</th>
|
||||||
|
<th>Active</th>
|
||||||
|
<th>Error</th>
|
||||||
|
<th>Success</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(file, index) in files">
|
||||||
|
<td>{{index}}</td>
|
||||||
|
<td>{{file.id}}</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>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
files: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="upload-btn">
|
||||||
|
<file-upload
|
||||||
|
title="Add upload files"
|
||||||
|
name="file"
|
||||||
|
post-action="/post"
|
||||||
|
put-action="/put"
|
||||||
|
:multiple="true"
|
||||||
|
:files="files"
|
||||||
|
ref="upload">
|
||||||
|
</file-upload>
|
||||||
|
<button v-show="!upload.active" @click.prevent="upload.active = true" type="button">Start upload</button>
|
||||||
|
<button v-show="upload.active" @click.prevent="upload.active = false" type="button">Stop upload</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FileUpload from '../src'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FileUpload,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
files: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
upload: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.upload = this.$refs.upload.$data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,228 @@
|
|||||||
|
<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>Name</th>
|
||||||
|
<th>Size</th>
|
||||||
|
<th>Progress</th>
|
||||||
|
<th>Speed</th>
|
||||||
|
<th>Active</th>
|
||||||
|
<th>Error</th>
|
||||||
|
<th>Success</th>
|
||||||
|
<th>Abort</th>
|
||||||
|
<th>Delete</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(file, index) in files">
|
||||||
|
<td>{{index}}</td>
|
||||||
|
<td>{{file.id}}</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="file.active = false">Abort</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
|
||||||
|
:title="title"
|
||||||
|
:events="events"
|
||||||
|
:name="name"
|
||||||
|
:post-action="postAction"
|
||||||
|
:put-action="putAction"
|
||||||
|
:extensions="extensions"
|
||||||
|
:accept="accept"
|
||||||
|
:multiple="multiple"
|
||||||
|
:size="size || 0"
|
||||||
|
:headers="headers"
|
||||||
|
:data="data"
|
||||||
|
:drop="drop"
|
||||||
|
:files="files"
|
||||||
|
ref="upload">
|
||||||
|
</file-upload>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button v-show="!upload.active" @click.prevent="upload.active = true" type="button">Start upload</button>
|
||||||
|
<button v-show="upload.active" @click.prevent="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>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Auto start: {{auto}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Active: {{upload.active}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Uploaded: {{upload.uploaded}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Drop active: {{upload.dropActive}}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div v-show="upload.dropActive" class="drop-active">
|
||||||
|
Drop ing
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FileUpload from '../src'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FileUpload,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
accept: 'image/*',
|
||||||
|
accept: '',
|
||||||
|
size: 1024 * 1024 * 10,
|
||||||
|
multiple: true,
|
||||||
|
extensions: 'gif,jpg,png',
|
||||||
|
// extensions: ['gif','jpg','png'],
|
||||||
|
// extensions: /\.(gif|png|jpg)$/i,
|
||||||
|
files: [],
|
||||||
|
upload: {},
|
||||||
|
title: 'Add upload files',
|
||||||
|
drop: true,
|
||||||
|
auto: false,
|
||||||
|
|
||||||
|
name: 'file',
|
||||||
|
|
||||||
|
postAction: './post.php',
|
||||||
|
putAction: './put.php',
|
||||||
|
|
||||||
|
headers: {
|
||||||
|
"X-Csrf-Token": "xxxx",
|
||||||
|
},
|
||||||
|
|
||||||
|
data: {
|
||||||
|
"_csrf_token": "xxxxxx",
|
||||||
|
},
|
||||||
|
|
||||||
|
events: {
|
||||||
|
add(file, component) {
|
||||||
|
console.log('add');
|
||||||
|
if (this.$parent.auto) {
|
||||||
|
component.active = true;
|
||||||
|
}
|
||||||
|
file.headers['X-Filename'] = encodeURIComponent(file.name)
|
||||||
|
file.data.finename = file.name
|
||||||
|
|
||||||
|
// file.putAction = 'xxx'
|
||||||
|
// file.postAction = 'xxx'
|
||||||
|
},
|
||||||
|
progress(file, component) {
|
||||||
|
console.log('progress ' + file.progress);
|
||||||
|
},
|
||||||
|
after(file, component) {
|
||||||
|
console.log('after');
|
||||||
|
},
|
||||||
|
before(file, component) {
|
||||||
|
console.log('before');
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.upload = this.$refs.upload.$data
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
remove(file) {
|
||||||
|
var index = this.files.indexOf(file)
|
||||||
|
if (index != -1) {
|
||||||
|
this.files.splice(index, 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,123 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<main class="multi">
|
||||||
|
<div class="image">
|
||||||
|
<div class="lists">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Index</th>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Size</th>
|
||||||
|
<th>Progress</th>
|
||||||
|
<th>Speed</th>
|
||||||
|
<th>Active</th>
|
||||||
|
<th>Error</th>
|
||||||
|
<th>Success</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(file, index) in imageFiles">
|
||||||
|
<td>{{index}}</td>
|
||||||
|
<td>{{file.id}}</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>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="upload-btn">
|
||||||
|
<file-upload
|
||||||
|
title="Add upload images"
|
||||||
|
name="image"
|
||||||
|
post-action="/image"
|
||||||
|
put-action="/image"
|
||||||
|
accept='image/*'
|
||||||
|
:multiple="true"
|
||||||
|
:files="imageFiles"
|
||||||
|
ref="image">
|
||||||
|
</file-upload>
|
||||||
|
<button v-show="!image.active" @click.prevent="image.active = true" type="button">Start upload</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="video">
|
||||||
|
<div class="lists">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Index</th>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Size</th>
|
||||||
|
<th>Progress</th>
|
||||||
|
<th>Speed</th>
|
||||||
|
<th>Active</th>
|
||||||
|
<th>Error</th>
|
||||||
|
<th>Success</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(file, index) in videoFiles">
|
||||||
|
<td>{{index}}</td>
|
||||||
|
<td>{{file.id}}</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>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="upload-btn">
|
||||||
|
<file-upload
|
||||||
|
title="Add upload videos"
|
||||||
|
name="video"
|
||||||
|
post-action="/video"
|
||||||
|
put-action="/video"
|
||||||
|
accept='video/*'
|
||||||
|
:multiple="true"
|
||||||
|
:files="videoFiles"
|
||||||
|
ref="video">
|
||||||
|
</file-upload>
|
||||||
|
<button v-show="!video.active" @click.prevent="video.active = true" type="button">Start upload</button>
|
||||||
|
<button v-show="video.active" @click.prevent="video.active = false" type="button">Stop upload</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FileUpload from '../src'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FileUpload,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
image: {},
|
||||||
|
imageFiles: [],
|
||||||
|
|
||||||
|
video: {},
|
||||||
|
videoFiles: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.image = this.$refs.image.$data
|
||||||
|
this.video = this.$refs.video.$data
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,110 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="upload-btn">
|
||||||
|
<file-upload
|
||||||
|
title="Add upload files"
|
||||||
|
name="file"
|
||||||
|
post-action="/"
|
||||||
|
:multiple="true"
|
||||||
|
:events="events"
|
||||||
|
ref="upload">
|
||||||
|
</file-upload>
|
||||||
|
<button v-show="!upload.active" @click.prevent="upload.active = true" type="button">Start upload</button>
|
||||||
|
<button v-show="upload.active" @click.prevent="upload.active = false" type="button">Stop upload</button>
|
||||||
|
</div>
|
||||||
|
<div class="lists">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Index</th>
|
||||||
|
<th>ID</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>Delete</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(file, index) in files">
|
||||||
|
<td>{{index}}</td>
|
||||||
|
<td>{{file.id}}</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="remove(file)">x</button></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FileUpload from '../src'
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
function addFile(file) {
|
||||||
|
var newFile = Object.assign({}, file)
|
||||||
|
file._vuex = newFile
|
||||||
|
this.$store.commit('addFile', newFile)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function updateFile(file) {
|
||||||
|
var oldFile = file._vuex
|
||||||
|
var newFile = Object.assign({}, file)
|
||||||
|
file._vuex = newFile
|
||||||
|
this.$store.commit('updateFile', {oldFile, newFile})
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeFile(file) {
|
||||||
|
this.$store.commit('removeFile', file._vuex)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FileUpload,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
upload: {},
|
||||||
|
events: {
|
||||||
|
add: addFile,
|
||||||
|
progress: updateFile,
|
||||||
|
before: updateFile,
|
||||||
|
after: updateFile,
|
||||||
|
remove: removeFile,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: mapState({
|
||||||
|
files: state => state.files
|
||||||
|
}),
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
remove(file) {
|
||||||
|
this.$store.commit('removeFile', file)
|
||||||
|
this.$refs.upload.remove(file.id)
|
||||||
|
},
|
||||||
|
abort(file) {
|
||||||
|
this.$refs.upload.abort(file.id)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.upload = this.$refs.upload.$data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
|
||||||
|
import App from './App'
|
||||||
|
|
||||||
|
import Home from './Home'
|
||||||
|
import Multi from './Multi'
|
||||||
|
import CrossRouter from './CrossRouter'
|
||||||
|
import CrossRouterUpload from './CrossRouterUpload'
|
||||||
|
import CrossRouterList from './CrossRouterList'
|
||||||
|
import VuexComponent from './Vuex'
|
||||||
|
|
||||||
|
import store from './store'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
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';
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'history',
|
||||||
|
base: __dirname,
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: Home
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/multi',
|
||||||
|
component: Multi
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/cross-router',
|
||||||
|
component: CrossRouter,
|
||||||
|
children: [
|
||||||
|
{ path: '', component: CrossRouterUpload },
|
||||||
|
{ path: 'list', component: CrossRouterList }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/vuex',
|
||||||
|
component: VuexComponent,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render(h) {
|
||||||
|
return h(App)
|
||||||
|
}
|
||||||
|
}).$mount('#app')
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
|
||||||
|
const state = {
|
||||||
|
files: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
const mutations = {
|
||||||
|
addFile (state, file) {
|
||||||
|
state.files.push(file)
|
||||||
|
},
|
||||||
|
updateFile (state, {oldFile, newFile}) {
|
||||||
|
var index = state.files.indexOf(oldFile)
|
||||||
|
if (index == -1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
state.files.splice(index, 1, newFile);
|
||||||
|
},
|
||||||
|
removeFile(state, file) {
|
||||||
|
var index = state.files.indexOf(file)
|
||||||
|
if (index != -1) {
|
||||||
|
state.files.splice(index, 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
const actions = {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const getters = {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
strict: process.env.NODE_ENV !== 'production',
|
||||||
|
state,
|
||||||
|
getters,
|
||||||
|
actions,
|
||||||
|
mutations
|
||||||
|
})
|
||||||
@ -1,95 +0,0 @@
|
|||||||
import Vue from 'vue/dist/vue.js'
|
|
||||||
|
|
||||||
var FileUpload = require('./FileUpload.vue');
|
|
||||||
// import FileUpload from './FileUpload.vue';
|
|
||||||
|
|
||||||
|
|
||||||
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({
|
|
||||||
el:'#app',
|
|
||||||
components: {
|
|
||||||
FileUpload:FileUpload,
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
accept: 'image/*',
|
|
||||||
size: 1024 * 1024 * 10,
|
|
||||||
multiple: true,
|
|
||||||
extensions: 'gif,jpg,png',
|
|
||||||
// extensions: ['gif','jpg','png'],
|
|
||||||
// extensions: /\.(gif|png|jpg)$/i,
|
|
||||||
files: [],
|
|
||||||
upload: [],
|
|
||||||
title: 'Add upload files',
|
|
||||||
drop: true,
|
|
||||||
auto: false,
|
|
||||||
|
|
||||||
name: 'file',
|
|
||||||
|
|
||||||
postAction: './post.php',
|
|
||||||
putAction: './put.php',
|
|
||||||
|
|
||||||
headers: {
|
|
||||||
"X-Csrf-Token": "xxxx",
|
|
||||||
},
|
|
||||||
|
|
||||||
data: {
|
|
||||||
"_csrf_token": "xxxxxx",
|
|
||||||
},
|
|
||||||
|
|
||||||
events: {
|
|
||||||
add(file, component) {
|
|
||||||
console.log('add');
|
|
||||||
if (this.$parent.auto) {
|
|
||||||
component.active = true;
|
|
||||||
}
|
|
||||||
file.headers['X-Filename'] = encodeURIComponent(file.name)
|
|
||||||
file.data.finename = file.name
|
|
||||||
|
|
||||||
// file.putAction = 'xxx'
|
|
||||||
// file.postAction = 'xxx'
|
|
||||||
},
|
|
||||||
progress(file, component) {
|
|
||||||
console.log('progress ' + file.progress);
|
|
||||||
},
|
|
||||||
after(file, component) {
|
|
||||||
console.log('after');
|
|
||||||
},
|
|
||||||
before(file, component) {
|
|
||||||
console.log('before');
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.upload = this.$refs.upload.$data
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
remove(file) {
|
|
||||||
var index = this.files.indexOf(file)
|
|
||||||
if (index != -1) {
|
|
||||||
this.files.splice(index, 1);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Loading…
Reference in new issue