git
9 years ago
parent
e2f7e18b6b
commit
05d6158671
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
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<header id="header">
|
||||
<h1>Upload test</h1>
|
||||
<nav>
|
||||
<h2>Navigation</h2>
|
||||
<h3>Please click on the navigation</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>
|
||||
</template>
|
||||
<style>
|
||||
nav {
|
||||
margin-bottom: 1em
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
@ -1,50 +0,0 @@
|
||||
<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>
|
||||
@ -1,47 +0,0 @@
|
||||
<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>
|
||||
@ -1,41 +0,0 @@
|
||||
<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>
|
||||
@ -1,123 +0,0 @@
|
||||
|
||||
<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>
|
||||
@ -1,110 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="upload-btn">
|
||||
<file-upload
|
||||
title="Add upload files"
|
||||
name="file"
|
||||
post-action="/"
|
||||
:multiple="true"
|
||||
:events="events"
|
||||
post-action="/post"
|
||||
put-action="/put"
|
||||
:value="files"
|
||||
@input="input"
|
||||
@input-file="inputFile"
|
||||
ref="upload">
|
||||
Add upload files
|
||||
</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)
|
||||
// Files Event
|
||||
input(files) {
|
||||
this.$store.commit('updateFiles', files)
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.upload = this.$refs.upload.$data
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue