| <template> |
| <div :ref="id" :action="url" :id="id" 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 .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: 0px; |
| } |
| |
| .dropzone .dz-preview:hover .dz-image img { |
| transform: none; |
| -webkit-filter: none; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .dropzone .dz-preview .dz-details { |
| bottom: 0px; |
| top: 0px; |
| color: white; |
| background-color: rgba(33, 150, 243, 0.8); |
| transition: opacity .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> |