git
8 years ago
parent
5ce75ac4e8
commit
f25f126bd1
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,7 +1,175 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="example-avatar">
|
<div class="example-avatar">
|
||||||
No content
|
<div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
|
||||||
|
<h3>Drop files to upload</h3>
|
||||||
|
</div>
|
||||||
|
<div class="avatar-upload" v-show="!edit">
|
||||||
|
<div class="text-center p-2">
|
||||||
|
<label for="avatar">
|
||||||
|
<img :src="files.length ? files[0].url : 'https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm'" class="rounded-circle" />
|
||||||
|
<h4 class="pt-2">or<br/>Drop files anywhere to upload</h4>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-2">
|
||||||
|
<file-upload
|
||||||
|
extensions="gif,jpg,jpeg,png,webp"
|
||||||
|
accept="image/png,image/gif,image/jpeg,image/webp"
|
||||||
|
name="avatar"
|
||||||
|
class="btn btn-primary"
|
||||||
|
post-action="/upload/post"
|
||||||
|
:drop="!edit"
|
||||||
|
v-model="files"
|
||||||
|
@input-filter="inputFilter"
|
||||||
|
@input-file="inputFile"
|
||||||
|
ref="upload">
|
||||||
|
Upload avatar
|
||||||
|
</file-upload>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="avatar-edit" v-show="files.length && edit">
|
||||||
|
<div class="avatar-edit-image" v-if="files.length">
|
||||||
|
<img ref="editImage" :src="files[0].url" />
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-4">
|
||||||
|
<button type="button" class="btn btn-secondary" @click.prevent="$refs.upload.clear">Cancel</button>
|
||||||
|
<button type="submit" class="btn btn-primary" @click.prevent="editSave">Save</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-5">
|
||||||
|
Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Avatar.vue">https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Avatar.vue</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
|
.example-avatar .avatar-upload .rounded-circle {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
.example-avatar .text-center .btn {
|
||||||
|
margin: 0 .5rem
|
||||||
|
|
||||||
|
}
|
||||||
|
.example-avatar .avatar-edit-image {
|
||||||
|
max-width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.example-avatar .drop-active {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9999;
|
||||||
|
opacity: .6;
|
||||||
|
text-align: center;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-avatar .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>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Cropper from 'cropperjs'
|
||||||
|
import FileUpload from 'vue-upload-component'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FileUpload,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
files: [],
|
||||||
|
edit: false,
|
||||||
|
cropper: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
edit(value) {
|
||||||
|
if (value) {
|
||||||
|
this.$nextTick(function () {
|
||||||
|
if (!this.$refs.editImage) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let cropper = new Cropper(this.$refs.editImage, {
|
||||||
|
aspectRatio: 1 / 1,
|
||||||
|
viewMode: 1,
|
||||||
|
minContainerHeight: 300,
|
||||||
|
})
|
||||||
|
this.cropper = cropper
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (this.cropper) {
|
||||||
|
this.cropper.destroy()
|
||||||
|
this.cropper = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async editSave() {
|
||||||
|
this.edit = false
|
||||||
|
let blob = await new Promise((resolve, reject) => {
|
||||||
|
this.cropper.getCroppedCanvas().toBlob(function (value) {
|
||||||
|
resolve(value)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
let file = new File([blob], this.files[0].name, { type: blob.type })
|
||||||
|
this.$refs.upload.update(this.files[0].id, {
|
||||||
|
file,
|
||||||
|
type: file.type,
|
||||||
|
size: file.size,
|
||||||
|
active: true,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
alert(message) {
|
||||||
|
alert(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
inputFile(newFile, oldFile, prevent) {
|
||||||
|
if (newFile && !oldFile) {
|
||||||
|
this.$nextTick(function () {
|
||||||
|
this.edit = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (!newFile && oldFile) {
|
||||||
|
this.edit = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
inputFilter(newFile, oldFile, prevent) {
|
||||||
|
if (newFile && !oldFile) {
|
||||||
|
if (!/\.(gif|jpg|jpeg|png|webp)$/i.test(newFile.name)) {
|
||||||
|
this.alert('Your choice is not a picture')
|
||||||
|
return prevent()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newFile && (!oldFile || newFile.file !== oldFile.file)) {
|
||||||
|
newFile.url = ''
|
||||||
|
let URL = window.URL || window.webkitURL
|
||||||
|
if (URL && URL.createObjectURL) {
|
||||||
|
newFile.url = URL.createObjectURL(newFile.file)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,7 +1,103 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="example-drag">
|
<div class="example-drag">
|
||||||
No content
|
<div class="upload">
|
||||||
|
<ul v-if="files.length">
|
||||||
|
<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>
|
||||||
|
<ul v-else>
|
||||||
|
<td colspan="7">
|
||||||
|
<div class="text-center p-5">
|
||||||
|
<h4>Drop files anywhere to upload<br/>or</h4>
|
||||||
|
<label for="file" class="btn btn-lg btn-primary">Select Files</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
|
||||||
|
<h3>Drop files to upload</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-btn">
|
||||||
|
<file-upload
|
||||||
|
class="btn btn-primary"
|
||||||
|
post-action="/upload/post"
|
||||||
|
:multiple="true"
|
||||||
|
:drop="true"
|
||||||
|
:drop-directory="true"
|
||||||
|
v-model="files"
|
||||||
|
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/Drag.vue">https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Drag.vue</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
|
.example-drag label.btn {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.example-drag .drop-active {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9999;
|
||||||
|
opacity: .6;
|
||||||
|
text-align: center;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-drag .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>
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FileUpload from 'vue-upload-component'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FileUpload,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
files: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,7 +1,101 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="example-multiple">
|
<div class="example-multiple">
|
||||||
No content
|
<h1 id="example-title" class="example-title">Multiple instances</h1>
|
||||||
|
<div class="upload">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(file, index) in files1" :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"
|
||||||
|
input-id="file1"
|
||||||
|
post-action="/upload/post"
|
||||||
|
v-model="files1"
|
||||||
|
ref="upload1">
|
||||||
|
<i class="fa fa-plus"></i>
|
||||||
|
Select files
|
||||||
|
</file-upload>
|
||||||
|
<label for="file1" class="btn btn-primary">Label Select files</label>
|
||||||
|
<button type="button" class="btn btn-success" v-if="!$refs.upload1 || !$refs.upload1.active" @click.prevent="$refs.upload1.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.upload1.active = false">
|
||||||
|
<i class="fa fa-stop" aria-hidden="true"></i>
|
||||||
|
Stop Upload
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="upload">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(file, index) in files2" :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"
|
||||||
|
input-id="file2"
|
||||||
|
post-action="/upload/post"
|
||||||
|
v-model="files2"
|
||||||
|
ref="upload2">
|
||||||
|
<i class="fa fa-plus"></i>
|
||||||
|
Select files
|
||||||
|
</file-upload>
|
||||||
|
<label for="file2" class="btn btn-primary">Label Select files</label>
|
||||||
|
<button type="button" class="btn btn-success" v-if="!$refs.upload2 || !$refs.upload2.active" @click.prevent="$refs.upload2.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.upload2.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/Multiple.vue">https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Multiple.vue</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
|
.example-multiple label.btn {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
.example-multiple .upload {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FileUpload from 'vue-upload-component'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FileUpload,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
files1: [],
|
||||||
|
files2: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,7 +1,103 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="example-simple">
|
<div class="example-simple">
|
||||||
No content
|
<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"
|
||||||
|
v-model="files"
|
||||||
|
@input-filter="inputFilter"
|
||||||
|
@input-file="inputFile"
|
||||||
|
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/Simple.vue">https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Simple.vue</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
|
.example-simple label.btn {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FileUpload from 'vue-upload-component'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FileUpload,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
files: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
inputFile(newFile, oldFile) {
|
||||||
|
if (newFile && !oldFile) {
|
||||||
|
// add
|
||||||
|
console.log('add', newFile)
|
||||||
|
}
|
||||||
|
if (newFile && oldFile) {
|
||||||
|
// update
|
||||||
|
console.log('update', newFile)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!newFile && oldFile) {
|
||||||
|
// remove
|
||||||
|
console.log('remove', oldFile)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,7 +1,73 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="example-vuex">
|
<div class="example-simple">
|
||||||
No content
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
|
.example-simple label.btn {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
</style>
|
</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>
|
||||||
|
|||||||
Loading…
Reference in new issue