301 lines
8.1 KiB
Vue
301 lines
8.1 KiB
Vue
<template>
|
|
<div :id="id" :ref="id" :action="url" class="dropzone">
|
|
<input type="file" name="file">
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Dropzone from 'dropzone'
|
|
import 'dropzone/dist/dropzone.css'
|
|
// import { getToken } from 'api/qiniu';
|
|
|
|
Dropzone.autoDiscover = false
|
|
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
url: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
clickable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
defaultMsg: {
|
|
type: String,
|
|
default: '上传图片'
|
|
},
|
|
acceptedFiles: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
thumbnailHeight: {
|
|
type: Number,
|
|
default: 200
|
|
},
|
|
thumbnailWidth: {
|
|
type: Number,
|
|
default: 200
|
|
},
|
|
showRemoveLink: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
maxFilesize: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
maxFiles: {
|
|
type: Number,
|
|
default: 3
|
|
},
|
|
autoProcessQueue: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
useCustomDropzoneOptions: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
defaultImg: {
|
|
default: '',
|
|
type: [String, Array]
|
|
},
|
|
couldPaste: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dropzone: '',
|
|
initOnce: true
|
|
}
|
|
},
|
|
watch: {
|
|
defaultImg(val) {
|
|
if (val.length === 0) {
|
|
this.initOnce = false
|
|
return
|
|
}
|
|
if (!this.initOnce) return
|
|
this.initImages(val)
|
|
this.initOnce = false
|
|
}
|
|
},
|
|
mounted() {
|
|
const element = document.getElementById(this.id)
|
|
const vm = this
|
|
this.dropzone = new Dropzone(element, {
|
|
clickable: this.clickable,
|
|
thumbnailWidth: this.thumbnailWidth,
|
|
thumbnailHeight: this.thumbnailHeight,
|
|
maxFiles: this.maxFiles,
|
|
maxFilesize: this.maxFilesize,
|
|
dictRemoveFile: 'Remove',
|
|
addRemoveLinks: this.showRemoveLink,
|
|
acceptedFiles: this.acceptedFiles,
|
|
autoProcessQueue: this.autoProcessQueue,
|
|
dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
|
|
dictMaxFilesExceeded: '只能一个图',
|
|
previewTemplate: '<div class="dz-preview dz-file-preview"> <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div> <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div> <div class="dz-success-mark"> <i class="material-icons">done</i> </div> <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
|
|
init() {
|
|
const val = vm.defaultImg
|
|
if (!val) return
|
|
if (Array.isArray(val)) {
|
|
if (val.length === 0) return
|
|
val.map((v, i) => {
|
|
const mockFile = { name: 'name' + i, size: 12345, url: v }
|
|
this.options.addedfile.call(this, mockFile)
|
|
this.options.thumbnail.call(this, mockFile, v)
|
|
mockFile.previewElement.classList.add('dz-success')
|
|
mockFile.previewElement.classList.add('dz-complete')
|
|
vm.initOnce = false
|
|
return true
|
|
})
|
|
} else {
|
|
const mockFile = { name: 'name', size: 12345, url: val }
|
|
this.options.addedfile.call(this, mockFile)
|
|
this.options.thumbnail.call(this, mockFile, val)
|
|
mockFile.previewElement.classList.add('dz-success')
|
|
mockFile.previewElement.classList.add('dz-complete')
|
|
vm.initOnce = false
|
|
}
|
|
},
|
|
accept: (file, done) => {
|
|
/* 七牛*/
|
|
// const token = this.$store.getters.token;
|
|
// getToken(token).then(response => {
|
|
// file.token = response.data.qiniu_token;
|
|
// file.key = response.data.qiniu_key;
|
|
// file.url = response.data.qiniu_url;
|
|
// done();
|
|
// })
|
|
done()
|
|
},
|
|
sending: (file, xhr, formData) => {
|
|
// formData.append('token', file.token);
|
|
// formData.append('key', file.key);
|
|
vm.initOnce = false
|
|
}
|
|
})
|
|
|
|
if (this.couldPaste) {
|
|
document.addEventListener('paste', this.pasteImg)
|
|
}
|
|
|
|
this.dropzone.on('success', file => {
|
|
vm.$emit('dropzone-success', file, vm.dropzone.element)
|
|
})
|
|
this.dropzone.on('addedfile', file => {
|
|
vm.$emit('dropzone-fileAdded', file)
|
|
})
|
|
this.dropzone.on('removedfile', file => {
|
|
vm.$emit('dropzone-removedFile', file)
|
|
})
|
|
this.dropzone.on('error', (file, error, xhr) => {
|
|
vm.$emit('dropzone-error', file, error, xhr)
|
|
})
|
|
this.dropzone.on('successmultiple', (file, error, xhr) => {
|
|
vm.$emit('dropzone-successmultiple', file, error, xhr)
|
|
})
|
|
},
|
|
destroyed() {
|
|
document.removeEventListener('paste', this.pasteImg)
|
|
this.dropzone.destroy()
|
|
},
|
|
methods: {
|
|
removeAllFiles() {
|
|
this.dropzone.removeAllFiles(true)
|
|
},
|
|
processQueue() {
|
|
this.dropzone.processQueue()
|
|
},
|
|
pasteImg(event) {
|
|
const items = (event.clipboardData || event.originalEvent.clipboardData).items
|
|
if (items[0].kind === 'file') {
|
|
this.dropzone.addFile(items[0].getAsFile())
|
|
}
|
|
},
|
|
initImages(val) {
|
|
if (!val) return
|
|
if (Array.isArray(val)) {
|
|
val.map((v, i) => {
|
|
const mockFile = { name: 'name' + i, size: 12345, url: v }
|
|
this.dropzone.options.addedfile.call(this.dropzone, mockFile)
|
|
this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)
|
|
mockFile.previewElement.classList.add('dz-success')
|
|
mockFile.previewElement.classList.add('dz-complete')
|
|
return true
|
|
})
|
|
} else {
|
|
const mockFile = { name: 'name', size: 12345, url: val }
|
|
this.dropzone.options.addedfile.call(this.dropzone, mockFile)
|
|
this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)
|
|
mockFile.previewElement.classList.add('dz-success')
|
|
mockFile.previewElement.classList.add('dz-complete')
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dropzone {
|
|
border: 2px solid #e5e5e5;
|
|
font-family: 'Roboto', sans-serif;
|
|
color: #777;
|
|
transition: background-color 0.2s linear;
|
|
padding: 5px;
|
|
}
|
|
|
|
.dropzone:hover {
|
|
background-color: #f6f6f6;
|
|
}
|
|
|
|
i {
|
|
color: #ccc;
|
|
}
|
|
|
|
.dropzone .dz-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.dropzone input[name='file'] {
|
|
display: none;
|
|
}
|
|
|
|
.dropzone .dz-preview .dz-image {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.dropzone .dz-preview:hover .dz-image img {
|
|
transform: none;
|
|
filter: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.dropzone .dz-preview .dz-details {
|
|
bottom: 0;
|
|
top: 0;
|
|
color: white;
|
|
background-color: rgba(33, 150, 243, 0.8);
|
|
transition: opacity 0.2s linear;
|
|
text-align: left;
|
|
}
|
|
|
|
.dropzone .dz-preview .dz-details .dz-filename span,
|
|
.dropzone .dz-preview .dz-details .dz-size span {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
|
|
border: none;
|
|
}
|
|
|
|
.dropzone .dz-preview .dz-details .dz-filename:hover span {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.dropzone .dz-preview .dz-remove {
|
|
position: absolute;
|
|
z-index: 30;
|
|
color: white;
|
|
margin-left: 15px;
|
|
padding: 10px;
|
|
top: inherit;
|
|
bottom: 15px;
|
|
border: 2px white solid;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
letter-spacing: 1.1px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.dropzone .dz-preview:hover .dz-remove {
|
|
opacity: 1;
|
|
}
|
|
|
|
.dropzone .dz-preview .dz-success-mark,
|
|
.dropzone .dz-preview .dz-error-mark {
|
|
margin-left: -40px;
|
|
margin-top: -50px;
|
|
}
|
|
|
|
.dropzone .dz-preview .dz-success-mark i,
|
|
.dropzone .dz-preview .dz-error-mark i {
|
|
color: white;
|
|
font-size: 5rem;
|
|
}
|
|
</style>
|