You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.3 KiB
74 lines
2.3 KiB
<template>
|
|
<div class="example-simple">
|
|
<h1 id="example-title" class="example-title">Simple Example</h1>
|
|
<div class="upload">
|
|
<ul>
|
|
<li v-for="(file, index) in files" :key="file.id">
|
|
<span>{{file.name}}</span> -
|
|
<span>{{file.size | formatSize}}</span> -
|
|
<span v-if="file.error">{{file.error}}</span>
|
|
<span v-else-if="file.success">success</span>
|
|
<span v-else-if="file.active">active</span>
|
|
<span v-else-if="file.active">active</span>
|
|
<span v-else></span>
|
|
</li>
|
|
</ul>
|
|
<div class="example-btn">
|
|
<file-upload
|
|
class="btn btn-primary"
|
|
post-action="/upload/post"
|
|
extensions="gif,jpg,jpeg,png,webp"
|
|
accept="image/png,image/gif,image/jpeg,image/webp"
|
|
:multiple="true"
|
|
:size="1024 * 1024 * 10"
|
|
:value="files"
|
|
@input="inputUpdate"
|
|
ref="upload">
|
|
<i class="fa fa-plus"></i>
|
|
Select files
|
|
</file-upload>
|
|
<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="pt-5">
|
|
Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Vuex.vue">https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Vuex.vue</a><br/>
|
|
<a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/store.js">https://github.com/lian-yue/vue-upload-component/blob/master/docs/store.js</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
.example-simple label.btn {
|
|
margin-bottom: 0;
|
|
margin-right: 1rem;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
import FileUpload from 'vue-upload-component'
|
|
export default {
|
|
components: {
|
|
FileUpload,
|
|
},
|
|
|
|
computed: {
|
|
...mapState([
|
|
'files',
|
|
])
|
|
},
|
|
|
|
methods: {
|
|
inputUpdate(files) {
|
|
this.$store.commit('updateFiles', files)
|
|
},
|
|
}
|
|
}
|
|
</script>
|