123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297 |
- <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 .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;
- 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>
|