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>
|
||||
<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>
|
||||
</template>
|
||||
<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>
|
||||
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import FileUpload from 'vue-upload-component'
|
||||
export default {
|
||||
components: {
|
||||
FileUpload,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
files: [],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,101 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
<style>
|
||||
.example-multiple label.btn {
|
||||
margin-bottom: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.example-multiple .upload {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import FileUpload from 'vue-upload-component'
|
||||
export default {
|
||||
components: {
|
||||
FileUpload,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
files1: [],
|
||||
files2: [],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,103 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
<style>
|
||||
.example-simple label.btn {
|
||||
margin-bottom: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
</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>
|
||||
<div class="example-vuex">
|
||||
No content
|
||||
<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>
|
||||
|
||||
Loading…
Reference in new issue