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